Скругление углов в CSS

Главная > Учебник CSS >

Установка скругления

Cуществует возможность установить скругление углов рамки блока. При этом, фон заполняет только область внутри рамки. Если рамки нет, то скругляется только фон.

В CSS cкругление углов устанавливает свойство border-radius. В значении указывается радиус скругления в единицах, доступных в CSS.

Создадим блок и зададим рамку со скруглёнными углами.

Стиль:

+

7
8
9
10
11
12

#div1
  {
  border: 1px solid Red;
  padding: 20px;
  border-radius: 10px;
  }

HTML код:

16

<div>Блок со скруглёнными углами</div>

Скругление отдельных углов

Можно скруглить любой угол отдельно. Для этого есть свойства:

border-top-left-radius — скругление верхнего левого угла

border-top-right-radius — скругление верхнего правого угла

border-bottom-left-radius — скругление нижнего левого угла

border-bottom-right-radius — скругление нижнего правого угла

Создадим ещё один блок и сделаем скругление правого верхнего угла с радиусом 8 пикселей, а правого нижнего угла с радиусом 20 пикселей. Чтобы между блоками было расстояние, установим и внешние отступы:

Стиль:

13
14
15
16
17
18
19
20

#rightrad
  {
  border: 1px solid Red;
  padding: 20px;
  margin: 5px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 20px;
  }

HTML код:

25

<div>Блок с отдельными скруглёнными углами</div>

Краткая запись

Можно указать радиусы скругления для углов более коротким способом. Для этого свойству border-radius указывается не одно значение, а четыре, через пробел.

  • Сначала идёт верхний левый угол
  • затем верхний правый
  • затем нижний правый
  • затем нижний левый

Создадим блок и укажем ему радиусы скругления для каждого угла:

Стиль:

21
22
23
24
25
26
27

#allradius 
  {
  border-radius: 10px 5px 12px 21px;
  border: 1px solid Red;
  padding: 20px;
  margin: 5px;
  }

HTML код:

33

<div>Скругление всех углов по отдельности</div>

Скругление в виде эллипса

Скругление угла может быть не только в виде части окружности, но и в виде части эллипса. При этом блок может выглядеть так:

Для этого свойству border-radius сначала указывается горизонтальный радиус, затем через слеш вертикальный радиус. Такой блок создаётся так:

Стиль:

28
29
30
31
32
33
34

#elradius
  {
  width: 300px;
  height: 50px;
  background-color: #CCC;
  border-radius: 80px/20px;
  }

HTML код:

41

<div></div>

Для отдельных углов, такое скругление указывается по-другому. Горизонтальный и вертикальный радиус перечисляются через пробел. Пример:

Стиль:

35
36
37
38
39
40
41

#elk
  {
  border: 1px solid Red;
  padding: 20px;
  margin: 5px;
  border-bottom-left-radius: 50px 15px;
  }

HTML код:

49

<div>Скругление в виде эллипса</div>

Скругление в процентах

В CSS cкругление углов может указываться в процентах. Проценты берутся от сторон, образующих угол. Например, если для левого нижнего угла указать 10%, то на скругление уйдёт 10 процентов нижней части рамки и 10 процентов левой части рамки. Если указать 50%, то на скругление уйдёт по половине длинны сторон рамки. А если указать 100%, то на скругление уйдйт вся нижняя сторона и вся левая сторона рамки. Скругление в процентах можно указывать как для всех углов, так и для каждого угла отдельно.

Пример:

Стиль:

42
43
44
45
46
47
48

#pr
  {
  border: 1px solid Red;
  padding: 20px;
  margin: 5px; 
  border-bottom-left-radius: 35%;
  }

HTML код:

57

 
<div>Скругление в процентах</div>

Указание скругления в процентах позволяет создавать блоки с различными интересными формами без расчёта размеров. Например такие:

Такой блок создаётся очень просто. Для его создания нужно:

  1. Создать квадрантый блок. Длинну и ширину нужно указывать не пикселях, а в абсолютных единицах, например в сантиметрах, чтобы длинна и ширина были одинаковыми.
  2. Задать фон блока.
  3. Установить скругление всех углов 50 процентов.

border-radius | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+10.5+3.0+1.0+2.1+1.0+

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

Значение по умолчанию0
НаследуетсяНет
Процентная записьДа, относительно ширины блока
ПрименяетсяКо всем элементам, за исключением таблиц с border-collapse: collapse
Ссылка на спецификациюhttp://www.w3.org/TR/css3-background/#the-border-radius

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Значения

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

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

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

Рис. 1. Радиус скругления для создания разных типов уголков

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
   .radius {
    background: #f0f0f0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    padding: 15px; /* Поля вокруг текста */
    margin-bottom: 10px; /* Отступ снизу */
   }
  </style>
 </head> 
 <body> 
  <div>
   border-radius: 50px 0 0 50px;
  </div>
  <div>
   border-radius: 40px 10px;
  </div>
  <div>
   border-radius: 13em/3em;
  </div>
  <div>
   border-radius: 13em 0. 5em/1em 0.5em;
  </div>
  <div>
   border-radius: 8px;
  </div>
 </body> 
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Радиусы скругления в браузере Safari

Браузеры

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius.

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius.

Скруглённые уголки

CSS по теме

  • border-radius

Статьи по теме

  • Делаем стильные кнопки
  • Изящная деградация
  • Маскирование в CSS
  • Скруглённые уголки

Статьи по теме

Рецепты CSS

  • Как сделать круглые изображения?

Закругленные углы | HTML Собака

Закругленные углы раньше использовались для сужения сплошных фоновых изображений или, для гибких блоков, многочисленных фоновых изображений, по одному на угол, наложенных на несколько вложенных элементов div . Аргх, некрасиво. Ну, не больше. Теперь, с помощью простого CSS, вы можете добавить в дизайн больше изгибов, чем Мэрилин Монро.

Радиус границы?

Ага. Радиус границы. Однако не бойтесь — вам не обязательно иметь границы. 9Свойство 0005 border-radius можно использовать для добавления угла к каждому углу блока.

#мэрилин {
    фон: #fff;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 20 пикселей; 
}

Вот и все. Закругленные углы, видите? Ну, да, если у вас толковый браузер (см. примечание ниже).

Углы обрезаются вокруг соответствующих четвертей окружности (или эллипса) заданного радиуса.

Конечно, если вы хотите рамку…

#ok_a_border_then {
    граница: 5px сплошная #8b2;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 5px; 
 

}

Упс.

Реклама здесь! На давно известном, хорошо читаемом и уважаемом ресурсе веб-разработки.

Несколько значений

border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius также можно использовать для нацеливания на определенные углы.

Еще немного менее ужасно многословный, вы также можете определить все радиусы углов (какое замечательное слово) индивидуально с помощью списка значений, разделенных пробелами, работая по часовой стрелке от верхнего левого угла, как и другие сокращенные свойства:

#монро {
    фон: #fff;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 6px 12px 18px 24px; 
}
Радиус границы с несколькими значениями.

Пышные.

Используя два значения вместо четырех, вы нацеливаете верхний левый и нижний правый с первой длиной (или процентом) и верхний правый + нижний левый со вторым. Три значения? Верхний левый, затем верхний правый + нижний левый, затем нижний правый. Сокрушительный.

Гах! Просто должны были быть проблемы с браузером, не так ли? Черт бы вас побрал, браузеры.

Internet Explorer версии 8 и ниже не поддерживает border-radius . Единственный способ справиться с этим — либо обойтись дизайном в тех браузерах, которые не имеют закругленных углов (большинство людей могут с этим смириться), либо вернуться к старым фоновым изображениям.

Вы также можете наткнуться на аналогичные проприетарные свойства, такие как -webkit-border-radius и -moz-border-radius , которые предназначены для старых, малоиспользуемых версий Safari и Firefox соответственно. Наш тщательно сформулированный профессиональный совет? К черту их.

Эллипсы

Круги для вас слишком квадратные? Вы можете указать разные горизонтальные и вертикальные радиусыiii, разделив значения знаком «/».

#нано {
        фон: #fff;
        ширина: 100 пикселей;
        высота: 150 пикселей;
          радиус границы: 50px/100px; 
        радиус нижнего левого края: 50 пикселей;
        граница-нижний-правый-радиус: 50px;
}
Нану.

Радиус границы: создавайте закругленные углы с помощью CSS!

Tweet

Свойство CSS3 border-radius позволяет веб-разработчикам легко использовать закругленные углы в своих элементах дизайна, без необходимости использования угловых изображений или использования нескольких тегов div, и, возможно, это один из самых обсуждаемых аспектов CSS3. .

С момента первого анонса в 2005 году свойство boder-radius получило широкую поддержку браузеров (хотя и с некоторыми расхождениями), и благодаря относительной простоте использования веб-разработчики быстро освоили эту новую технологию.

Вот простой пример:

Это поле должно иметь закругленные углы для Firefox, Safari/Chrome, Opera и IE9.

Теоретически код для этого примера довольно прост:

#example1 {
border-radius: 15px;
}

Однако на данный момент вам также необходимо использовать префикс -moz- для поддержки Firefox (дополнительные сведения см. в разделе поддержки браузеров этой статьи):

#example1 {
-moz- радиус границы: 15px;
радиус границы: 15px;
}

Как это работает

Скругленные углы можно создавать независимо, используя четыре отдельных свойства border-*-radius (border-bottom-left-radius, border-top-left-radius и т. д.) или для всех четырех углов. одновременно используя сокращенное свойство border-radius.

Сначала мы рассмотрим синтаксис отдельных свойств border-*-radius, а затем рассмотрим, как работает сокращенное свойство border-radius.

граница-нижний-левый-радиус, граница-нижняя-правая-радиус, граница-верхний-левый-радиус, граница-верхний-правый-радиус

Каждое из свойств border-*-radius может принимать одно или два значения, выраженные в виде длины или процента (проценты относятся к соответствующим размерам рамки).

Синтаксис:

граница-*-*-радиус: [ <длина> | <%> ] [ <длина> | <%> ]?

Примеры:

border-top-left-radius: 10px 5px;
граница-нижний-правый-радиус: 10% 5%;
граница-верхний-правый-радиус: 10px;

Там, где указаны два значения, они используются для определения по порядку горизонтального и вертикального радиусов четверти эллипса, который, в свою очередь, определяет кривизну угла внешнего края границы.

Если указано только одно значение, оно используется для одинакового определения как горизонтального, так и вертикального радиусов.

На следующей диаграмме дано несколько примеров того, как могут выглядеть углы при разных радиусах:

Если одно из значений равно нулю, угол будет квадратным, а не круглым.

border-radius

Сокращенное свойство border-radius можно использовать для одновременного определения всех четырех углов. Свойство принимает один или два набора значений, каждый из которых содержит от одной до четырех длин или процентов.

Синтаксис:

[ <длина> | <процент> ]{1,4} [ / [ <длина> | <процент> ]{1,4} ]?

Примеры:

радиус границы: 5px 10px 5px 10px / 10px 5px 10px 5px;
радиус границы: 5 пикселей;
радиус границы: 5px 10px / 10px;

Первый набор значений (1-4) определяет горизонтальные радиусы для всех четырех углов. Необязательный второй набор значений, перед которым ставится «/», определяет вертикальные радиусы для всех четырех углов. Если предоставляется только один набор значений, они используются для одинакового определения как вертикали, так и горизонтали.

Для каждого набора значений применяется следующее:

Если указаны все четыре значения, они представляют верхний левый, верхний правый, нижний правый и нижний левый радиусы соответственно. Если нижний левый опущен, он совпадает с верхним правым, если нижний правый опущен, он совпадает с верхним левым, и если указано только одно значение, оно используется для одинаковой установки всех четырех радиусов.

Поддержка браузера

В настоящее время Opera (начиная с версии 10.5), Safari (начиная с версии 5) и Chrome (начиная с версии 5) поддерживают отдельные свойства border-*-radius и сокращенное свойство border-radius, как изначально определено в текущая спецификация W3C (хотя по-прежнему существуют нерешенные ошибки по таким вопросам, как переходы стилей границы, использование процентов для длины и т. д.).

Mozilla Firefox (начиная с версии 1. 0) поддерживает border-radius с префиксом -moz-, хотя между реализацией Mozilla и текущей спецификацией W3C есть некоторые расхождения (см. ниже).

Обновление: Последние ночные версии Firefox поддерживают радиус границы без префикса -moz-.

Safari и Chrome (и другие браузеры на основе webkit) поддерживают border-radius с префиксом -webkit- начиная с версии 3 (больше не требуется, начиная с версии 5), хотя опять же с некоторыми расхождениями с текущей спецификацией (см. эту статью для дополнительные сведения о том, как старые версии Webkit обрабатывают радиус границы).

Даже Microsoft пообещала и продемонстрировала в своем недавнем предварительном выпуске поддержку border-radius из Internet Explorer 9.далее (без префикса).

Префикс -moz-

Браузер Mozilla Firefox поддерживает свойство border-radius с префиксом -moz- , начиная с версии 1.0. Однако только с версии 3.5 браузер разрешил эллиптические углы, т. е. принял два значения для каждого угла для независимого определения горизонтального и вертикального радиусов. До версии 3.5 браузер принимал только одно значение для каждого угла, что приводило к углам с одинаковыми радиусами по горизонтали и вертикали.

Синтаксис, начиная с Firefox 3.5 и выше, в основном следует текущей спецификации W3C, как описано в этой статье, с префиксом -moz-. Единственное существенное отличие заключается в именовании отдельных свойств border-*-radius, при этом свойства с префиксом -moz- следуют немного другому соглашению об именах, как показано ниже:

Спецификация W3C Реализация Mozilla
радиус границы -moz-граница-радиус
граница-верхний-левый радиус -moz-border-radius-topleft
граница-верхний-правый-радиус -moz-border-radius-topright
граница-нижний-правый-радиус -moz-border-radius-bottomright
граница-нижний-левый радиус -moz-border-radius-bottomleft

Реализация Mozilla также ведет себя немного иначе, чем в спецификации, когда указываются проценты. Вы можете прочитать больше о Центре разработчиков Mozilla здесь.

Кросс-браузерные примеры

Вот несколько основных примеров, которые должны работать в текущих версиях Firefox, Safari/Chrome, Opera и даже IE9:

A

B

C

D

7 E

2 #Example_A {
высота: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius-bottomright: 50px;
граница-нижний-правый-радиус: 50px;
}

#Example_B {
высота: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius-bottomright: 50px 25px;
граница-нижний-правый-радиус: 50px 25px;
}

#Example_C {
высота: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius-bottomright: 25px 50px;
граница-нижний-правый-радиус: 25px 50px;
}

#Example_D {
height: 5em;
ширина: 12см;
-moz-border-radius: 1em 4em 1em 4em;
радиус границы: 1em 4em 1em 4em;
}

#Example_E {
высота: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius: 25px 10px / 10px 25px;
радиус границы: 25px 10px / 10px 25px;
}

#Example_F {
высота: 70 пикселей;
ширина: 70 пикселей;
-moz-border-radius: 35px;
радиус границы: 35 пикселей;
}

Дополнительные примечания и дополнительная литература

Спецификация фонов и границ W3C подробно описывает форму угла (особенно в случаях, когда две соседние границы имеют разную ширину), влияние радиуса границы на фоновые изображения, цвет и переходы стилей, что происходит, когда кривые перекрываются, и эффект радиуса границы на таблицах.

No related posts.