Сделай сайт. Легко.

border-radius

Песочница

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
div {
  background: #4CAF50;
  border: 4px double #fff;
  padding: 10px;
  box-shadow:rgb(165, 165, 165) 0 0 10px;
  color: #fff;
  border-radius: 0;
}

Краткая информация

Значение по умолчанию0
НаследуетсяНет
ПрименяетсяКо всем элементам, за исключением таблиц с border-collapsecollapse
АнимируетсяДа

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через косую черту (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчёт ведётся относительно ширины блока.

Табл. 1. Зависимость от числа значений
Число значенийРезультат
1Радиус указывается для всех четырёх уголков.
2Первое значение задаёт радиус верхнего левого и нижнего правого уголков, второе значение — верхнего правого и нижнего левого уголков.
3Первое значение устанавливает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого уголков, а третье — для нижнего правого уголка.
4По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголков.

В случае задания двух параметров через косую черту, то первый параметр задаёт радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скруглённым уголком и эллиптическим уголком.

Определение и использование

border-radiusСвойство определяет радиус углов элемента.

Совет. Это свойство позволяет добавлять округленные границы к элементам! 

Это свойство может иметь от одного до четырех значений. Вот правила:


Четыре значения - border-radius: 15px 50px 30px 5px; (первое значение относится к верхнему левому углу, второе значение относится к верхнему правому углу, третье значение относится к нижнему правому углу, а четвертое значение относится к нижнему левому углу):


Три значения - border-radius: 15px 50px 30px; (первое значение относится к верхнему левому углу, второе значение относится к верхним и нижним левым углам, а третье значение относится к нижнему правому углу):


Два значения - border-radius: 15px 50px; (первое значение относится к верхним левым и нижним правым углам, а второе значение относится к верхним и нижним левым углам):


Одно значение - border-radius: 15px; (значение применяется ко всем четырем углам, которые округлены одинаково:


Property
border-radius 5.0
4.0 -webkit-
9.0 4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5

Синтаксис CSS

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

Примечание . Четыре значения для каждого радиуса указаны в порядке сверху-слева, справа вверху, внизу справа, внизу слева. Если нижний левый опущен, это то же самое, что и верхний правый. Если снимок справа опущен, то он совпадает с левым верхним. Если верхний правый опущен, то он совпадает с левым верхним.

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !