Border-radius закругляет только один угол

команда css border-radius, похоже, не работает на всех углах. HTML:

<img style = "object-position: -200px -100px;" 
    id = "wlimage"
    <!--this is the image giving me problems--> src = "https://www.worldatlas.com/r/w1200/upload/56/a1/a7/shutterstock- 
424782349.jpg">

css

#wlimage {
border-radius: 30px;
width: 50%;
height: 50%;
}

Ваш HTML-код недействителен, отсутствует много закрывающих тегов

Johannes 22.10.2022 00:31

Что касается проблемы с радиусом границы, это связано с вашей настройкой object-position: -200px -100px;, которая скрывает большую часть изображения.

Johannes 22.10.2022 00:32
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
2
62
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в том, что ваш object-position стиль смещает изображение в img кадре. Рамка закруглена, но вы видите (квадратную) кромку самого изображения.

Я добавил красную рамку, чтобы вы могли видеть, где находится граница элемента <img> по сравнению с тем, где внутри него находится край изображения.

#wlimage {
  border-radius: 30px;
  border: 4px solid red; 
}
<img style = "object-position: -200px -100px;" 
  id = "wlimage"
  src = "https://www.worldatlas.com/r/w1200/upload/56/a1/a7/shutterstock-424782349.jpg">

Другие вопросы по теме