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

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

radius | HTML и CSS с примерами кода

Свойство border-radius

устанавливает радиус скругления уголков рамки.

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

Фон
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-image
  • border-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • box-shadow

Синтаксис

/* The syntax of the first radius allows one to four values */
/* Radius is set for all 4 sides */
border-radius: 10px;
/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;
/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;
/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;
/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px 5% / 20px;
/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;
/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;
/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;
border-radius: inherit;

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел.

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

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

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

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

border-radius: 0;

Применяется ко всем элементам, за исключением таблиц с border-collapse: collapse

Спецификации

  • CSS Backgrounds and Borders Module Level 3

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

Can I Use border-radius? Data on support for the border-radius feature across the major browsers from caniuse.com.

Описание и примеры

<!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>

HTML DOM Style borderRadius Свойство

❮ Назад ❮ Справочник по объектам стиля Далее ❯

Пример

Добавьте закругленные границы к элементу div:

document.getElementById(«myDIV»).style.borderRadius = «25px»;

Попробуйте сами »

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

Свойство borderRadius является сокращенным свойством для установки или возврата четырех свойств borderRadius.

Четыре свойства радиуса границы (в указанном порядке):

borderTopLeftRadius
borderTopRightRadius
borderBottomRightRadius
borderBottomLeftRadius

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

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

Свойство
границаРадиус Да 9,0 Да Да Да

Синтаксис

Возврат собственность Borderradius:

Объект . STYLE.BORDERRADIUS

Установите собственность BorderRadius:

Object .Style.Borderradius 3

. 1-4 длина | % |initial|inherit»

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

Значения свойств

.
Значение Описание
длина Определяет форму углов. Значение по умолчанию: 0
% Определяет форму углов в %
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о наследовать

Технические детали

Значение по умолчанию: 0
Возвращаемое значение: Строка, представляющая свойство border-radius элемента
Версия CSS CSS3

Связанные страницы

Ссылка CSS: свойство border-radius

❮ Предыдущая ❮ Справочник по объектам стиля Следующий ❯


NEW

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

9003 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Свойство CSS border-right

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

Установить стиль правой границы для разных элементов:

h2 {
  правая граница: 5 пикселей сплошной красный цвет;
}

h3 {
граница справа: 4 пикселя с синими точками;
}

дел {
граница справа: двойная;
}

Попробуйте сами »

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

граница справа свойство является сокращением свойство for (в следующем порядке):

  • border-right-width
  • стиль границы справа (обязательно)
  • граница правого цвета

Если border-right-color опущен, применяемый цвет будет цветом текст.

Показать демо ❯

Значение по умолчанию: средний нет цветной
Унаследовано: нет
Анимация: да, см. отдельные свойства . Читать о анимированном Попытайся
Версия: УС1
Синтаксис JavaScript: объект .style.borderRight=»5px с синими точками» Попытайся

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
граница правая 1,0 4,0 1,0 1,0 3,5

Синтаксис CSS

border-right: border-width border-style border-color |initial|inherit;

Значения свойств

Значение Описание Демо
ширина границы справа Обязательно. Определяет ширину правой границы. Значение по умолчанию «средний» Демонстрация ❯
Граница справа Обязательно. Определяет стиль правой границы. Значение по умолчанию «нет» Демонстрация ❯
граница правого цвета Дополнительно. Определяет цвет правой границы. Значение по умолчанию цвет текста Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник по CSS: Граница CSS

Ссылка на HTML DOM: свойство borderRight

❮ Предыдущая Полное руководство по CSS Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебник HTML
Учебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery


1 Top3 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM 90 | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

No related posts.