Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

border-radius

Свойство CSS border-radius используется для скругления углов фона HTML-элемента. Если установлена рамка элемента, то она тоже скругляется. Важно понимать, что форма элемента в любом случае остается прямоугольной.

Тип свойства

Назначение: рамки.

Применяется: ко всем элементам, кроме табличных, у которых установлено свойство border-collapse со значением collapse.

Наследуется: нет.

Значения

Значением свойства border-radius является указание одной или нескольких величин определяющих радиус скругления в каждом углу элемента. Допустимы следующие единицы измерения:

  • Проценты — значения в процентах (%), где за 100% берется ширина или высота элемента с учетом внутренних отступов (padding) и рамки (border). Отрицательные значения (-20%) указывать нельзя.
  • Размеры — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Для них тоже недопустимы отрицательные значения.

Процентная запись: относительно ширины или высоты элемента (в зависимости от места использования) с учетом размеров рамки и внутренних отступов.

Значение по умолчанию: 0.

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

Создание кругоподобных скруглений

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

  1. Одно значение — радиус скругления для всех углов одинаковый.
  2. Два значения — первое указывает радиус для верхнего левого и нижнего правого углов (по диагонали), а второе — для верхнего правого и нижнего левого.
  3. Три значения — первое задает радиус скругления для верхнего левого угла, второе — для верхнего правого и нижнего левого (по диагонали), третье — для нижнего правого угла.
  4. Четыре значения — начиная с верхней левого угла и по часовой стрелке: для верхнего левого, верхнего правого, нижнего правого, нижнего левого углов.

Создание овальных скруглений

Значения border-radius разбиваются на две части, между которыми ставится слеш (/). Таким образом их максимальное количество уже может достигать восьми (четыре до слеша и четыре после). Каждая из двух частей подчиняется тем же правилам, что и при создании кругоподобных скруглений, при этом значения перед слешем отвечают за радиус скругления каждого угла по горизонтали (ось X), а после слеша — по вертикали (ось Y).

Пример скругления угла с разными вариантами значений.

Использование свойства CSS border-radius

Обратите внимание, что координаты отсчитываются от внешнего края рамки.

Синтаксис

border-radius: [ размеры | проценты ]{1,4} [ / [ размеры | проценты ]{1,4} ]

Пример CSS: использование border-radius

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство border-radius</title>
  <style type="text/css">
   div {
    height: 50px; /* высота блоков DIV */
    background: #66ff66; /* их фон */
    margin-bottom: 5px; /* размер нижнего поля */
   }
   .div1 {
    border-radius: 55px 10px; /* cкругление углов */
   }
   .div2 {
    padding-left:30px; /* внутренний отступ слева */
    border: #000000 3px solid; /* стили рамки */
    border-radius: 3em 1em 4em 6.5em / 2em 3em 2.5em;
   }
  </style>
 </head>
 <body>
  <div class="div1">
   DIV1 - border-radius: 55px 10px.
  </div>
  <hr style="background:red; height:20px; border-radius:10px; border:none">
  <div class="div2">
   DIV2 - border-radius: 3em 1em 4em 6.5em / 2em 3em 2.5em.
  </div>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS border-radius.

Использование свойства CSS border-radius

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:До 9.09.0 и вышеДо 4.0От 4.0 до 7.07.0 и вышеДо 4.04.0 и вышеДо 10.510.5 и вышеДо 5.05.0 и выше
Поддержка:НетДаНетЧастичноДаНетДаНетДаНетЧастично

Google Chrome до версии 7.0 и Safari с версии 5.0 не понимают процентные значения border-radius.

CSS по алфавиту
CSS по назначению