Создаем закруглённые уголки с помощью CSS 3
Одно из наиболее ожидаемых свойств CSS3, несомненно, свойство border-radius. С помощью свойства border-radius можно создавать, такие популярные в последнее время, прямоугольники с закругленными углами, исключительно средствами CSS, не используя никаких изображений.
Кроссбраузерная совместимость.
К сожалению, CSS3 еще не поддерживается всеми браузерами. Свойство border-radius поддерживается Firefox (начиная с версии 1.0), Safari (с версии 3.1) и Chrome (с самой первой версии), но оно не поддерживается Internet Explorer и Opera (будет реализовано в Opera 10).
Так как CSS3 еще не является стандартом, Вы должны добавлять префикс для свойства border-radius чтобы оно работало в браузерах, которые его поддерживают. Если Вы хотите, чтобы оно работало в Firefox необходимо написать в стилях -moz-border-radius, для Safari/Chrome это свойство будет иметь такой вид — -webkit-border-radius.
Имейте ввиду, что, хотя Firefox, Сафари и Хром поддерживают это свойство, они реализуют его немного различными методами. Я сначала покажу Вам, как оно реализовано Firefox и затем объясню различия в Safari и Chrome.
Для начала создадим простой блок, для которого мы и будем применять свойство border-radius.
<body>
<div > </body>
В CSS зададим для него высоту, ширину и цвет фона:
#box <
width:590px;
height:100px;
background-color:#6B86A6; >
Добавляем свойство border-radius:
Свойство border-radius объявляется подобно свойствам margin и padding. Вы можете использовать как краткую запись этого свойства для всех четырёх углов прямоугольника, так и отдельно для каждого угла. При краткой записи указывается одно значение для каждого угла:
#box <
-moz-border-radius: 20px;
>
Теперь все четыре угла будут иметь радиус 20px: 
Вы также можете указать два значения, первое из которых будет определять радиус для верхнего левого и нижнего правого угла, а второе — для верхнего правого и нижнего левого:
#box <
-moz-border-radius:20px 40px;
>
Если Вы указываете три или четыре значения, они будут применяться в следующем порядке — верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол.
#box <
-moz-border-radius:10px 20px 30px 40px;
>
Объявляем свойство border-radius для каждого угла
- moz-border-radius-topleft для верхнего левого угла;
- moz-border-radius-topright для верхнего правго угла;
- moz-border-radius-bottomright для нижнего правого угла;
- moz-border-radius-bottomleft для нижнего левого угла;
Горизонтальный и вертикальный радиус
Это свойство можно также использовать для создания углов в виде четверти эллипса. Для этого необходимо добавить второе значение для нужного угла:
#box <
-moz-border-radius-topleft: 30px 15px;
> 
Как Вы можете видеть на картинке верхний левый угол имеет немного «скошенный» вид. Это потому что эти два значения определяют горизонтальный и вертикальный радиус соответственно. Когда используется одно значение браузер интерпретирует его как для горизонтального, так и для вертикального радиуса.
При краткой записи этого свойства значения для горизонтального и вертикального радиуса разделяются слэшем:
#box <
-moz-border-radius: 30px / 15px;
>
#box <
-moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
>
Использование свойства border-radius в Safari и Chrome.
- -webkit-border-top-left-radius для верхнего левого угла;
- -webkit-border-top-right-radius для верхнего правого угла;
- -webkit-border-bottom-right-radius для нижнего правого угла;
- -webkit-border-bottom-left-radius для нижнего левого угла;
Этот код не будет работать в Safari и Chrome:
#box <
-webkit-border-radius: 10px 20px 30px 40px;
>
Правильный код будет выглядеть так:
#box <
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
>
Горизонтальный и вертикальный радиус в Safari и Chrome.
В Safari и Chrome можно также указывать горизонтальный и вертикальный радиус:
#box <
-webkit-border-top-left-radius: 30px 15px;
>
При краткой записи можно указывать горизонтальный и вертикальный радиус для всех углов прямоугольника только если эти значения одинаковые для каждого угла. Также не требуется использование слэша:
#box <
-webkit-border-radius: 30px 15px;
>
Как сделать изображение круглым на CSS
Чтобы сделать изображение круглым с помощью CSS, нужно применить свойство border-radius.
Базовое изображение (квадратное)
Добавим в файл стилей класс для изображений, которые должны быть круглыми. Например, .avatar для всех аватарок. Используем свойство CSS3 border-radius для добавления закругленных углов к изображению. Значение 50% сделают их круглыми.
Теперь изображение стало круглым.
Оригинальные решения получаются при использовании разных радиусов скругления для углов элемента.
Bootstrap
Если вы используете Bootstrap 4, добавьте класс rounded-circle (или img-circle для Bootstrap 3) к элементу img, чтобы легко изменить его на круглое.
Rounded corners on rectangular image using CSS only
I’d like to create a round image from a rectangular image using radius-border.
Is there simple way to achieve this with CSS without distorting the image AND ensuring a circle is perfectly round.
See failed attempts here:
Can this be done in only CSS.
5 Answers 5
You do that by adding a parent div to your img and the code flows as follows
Round image using CSS object-fit and border radius:
img with background image
For older browsers, using the <img> tag
The trick is to set a transparent px for the src (to prevent broken image icon) and do the best CSS3 and background-size has to offer ( cover ).
Is there simple way to achieve this with CSS without distorting the image AND ensuring a circle is perfectly round.
Yes, and you can also avoid using parent elements by just setting the image as the background. You can also position the image as you wish by using the background-position attribute.
Updated to address concerns about size, roundness, skewing and dynamically loaded content.
CSS Styling Images — изображения
Используйте свойство border-radius для создания округленных изображений:
Пример
Пример
Миниатюр
Используйте свойство border для создания миниатюр изображений.
Пример
img <
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
>
<img src=»https://html5css.ru/css/paris.jpg» alt=»Paris»>
Эскиз изображения как ссылка:
Пример
img <
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
>
img:hover <
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
>
Адаптивные образы
Адаптивные изображения будут автоматически корректироваться в соответствии с размером экрана.
Измените размер окна обозревателя, чтобы увидеть эффект:
Если требуется, чтобы изображение было масштабировано, но никогда не масштабируется до размера, превышающего его исходный размер, добавьте следующее:
Пример
Совет: Подробнее о адаптивном веб-дизайне читайте в нашем руководстве по CSS RWD.
Центрировать изображение
Чтобы центрировать изображение, установите левое и правое поле в auto и внесите его в block элемент:
Пример
Polaroid изображения/карты
Язык троллей в Хардангер, Норвегия
Северное сияние в Норвегии
Пример
div.polaroid <
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
>
div.container <
text-align: center;
padding: 10px 20px;
>
Прозрачное изображение
Свойство opacity может принимать значение от 0,0-1,0. Чем меньше значение, тем прозрачнее:
Примечание: IE8 и более раньше польза filter:alpha(opacity=x) . X может принимать значение от 0-100. Более низкое значение делает элемент более прозрачным.
Пример
Текст изображения
Как разместить текст в изображении:
Пример
Try it Yourself:
Фильтры изображений
Свойство CSS filter добавляет визуальные эффекты (например, размытие и насыщенность) к элементу.
Примечание: Свойство Filter не поддерживается в обозревателе Internet Explorer, EDGE 12 или Safari 5,1 и более ранних версиях.
Пример
Изменить цвет всех изображений на черный и белый (100% серый):
Совет: Перейдите к нашей ссылке на CSS-фильтр , чтобы узнать больше о фильтрах CSS.
Наложение изображения при наведении
Создание эффекта наложения при наведении:
Пример
Исчезать в тексте:
Пример
Исчезать в коробке:
Пример
Пример
Пример
Пример
Отражение изображения
Наведите курсор мыши на изображение:
Пример
Адаптивная Галерея изображений
CSS можно использовать для создания галерей изображений. В этом примере используются мультимедийные запросы для повторного упорядочивания изображений на различных размерах экрана. Измените размер окна обозревателя, чтобы увидеть эффект:
Пример
.responsive <
padding: 0 6px;
float: left;
width: 24.99999%;
>
@media only screen and (max-width: 700px) <
.responsive <
width: 49.99999%;
margin: 6px 0;
>
>
@media only screen and (max-width: 500px) <
.responsive <
width: 100%;
>
>
Совет: Подробнее о адаптивном веб-дизайне читайте в нашем руководстве по CSS RWD.
Модальное изображение (расширенный)
Это пример, демонстрирующий, как CSS и JavaScript могут работать вместе.
Сначала используйте CSS для создания модального окна (диалоговое окно) и скройте его по умолчанию.
Затем используйте JavaScript, чтобы показать модальное окно и отобразить изображение внутри модального, когда пользователь щелкает по изображению: