Свойство border-radius
Описание
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
Можно использовать от1 до 4 значений, перечисляя их через пробел. В случае применения процентов, отсчёт ведётся относительно ширины блока.
Синтаксис
border-radius: радиус {1,4};Подробности
| Число значений | Результат |
| 1 | Радиус указывается для всех четырёх уголков. |
| 2 | Первое значение задаёт радиус верхнего левого и нижнего правого уголков, второе значение — верхнего правого и нижнего левого уголков. |
| 3 | Первое значение устанавливает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого уголков, а третье — для нижнего правого уголка. |
| 4 | По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголков. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#rad {
width: 250px;
height: 100px;
background-image: url('https://mfs.gki-webik.ru/s?path=/images/regular/bg.png');
border: 4px solid black;
border-radius: 30px;
}
</style>
<div id='rad'></div>
</body>
</html>Читайте также
Стиль последнего элемента определённого типа
Псевдокласс :last-of-type задаёт стиль последнего элемента определённого типа в группе братских элементов (имеющих одного родителя)....
Свойство flex
Сокращённое свойство, которое позволяет указать параметры элемента, чтобы он эффективно заполнял доступное пространство. Элементы могут быть растянуты...
Стиль подсказывающего текста
Псевдоэлемент, который используется для вывода контента после содержимого элемента, к которому он добавляется. Псевдоэлемент ::placeholder работает со...
Свойство word-wrap
Указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область....