пример
Добавить закругленные границы в <div> элемент:
div
{
border: 2px solid;
border-radius: 25px;
}
Попробуй сам " Определение и использование
Свойство границы радиуса свойство является обобщающим для установки четырех границ - * - радиус свойства.
Tip: Это свойство позволяет добавлять закругленные границы элементам!
Значение по умолчанию: | 0 |
---|---|
Наследование: | no |
Animatable: | yes. Read about animatable Try it |
Версия: | CSS3 |
Синтаксис JavaScript: | object .style.borderRadius="25px" Try it |
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа следуют -webkit- или -moz- указать первую версию, которая работала с приставкой.
Имущество | |||||
---|---|---|---|---|---|
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;
Note: Эти четыре значения для каждого радиусов приведены в порядке верхний левый, верхний правый, нижний правый, нижний левый. Если нижний левый опущен, так же, как верхнем правом углу. Если нижний правый опущен, так же, как сверху слева. Если верхний правый опущен, так же, как сверху слева.
Значения свойств
Стоимость | Описание | Сыграй |
---|---|---|
length | Определяет форму углов. Значение по умолчанию равно 0 | Сыграй " |
% | Определяет форму углов в% | Сыграй " |
initial | Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный | Сыграй " |
inherit | Наследует это свойство от своего родительского элемента. Читайте о унаследовать |
Пример 1
border-radius:2em;
is equivalent to:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
Пример 2
border-radius: 2em 1em 4em / 0.5em 3em;
is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
Похожие страницы
CSS3 учебник: CSS3 границы
HTML DOM ссылка: borderRadius property