Css border radius с одной стороны. Кроссбраузерный border-radius

В последнее время я пытался переосмыслить правила CSS, которые я принял в своей практике. Я написал огромное количество кода без реального понимания того, почему он работает именно так.

Я просто решал задачи определенным способом, основываясь на общепринятой практике. Но с недавних пор я задумался, могу ли я узнать хотя бы приблизительно причину, почему все работает так, а не иначе?

Идеальные круги в CSS

CSS круги на Rdio, Dribbble, и Codecademy

Такой трюк часто достигается использованием CSS свойства border-radius. Я решал эту задачу следующим образом - создавал квадрат и устанавливал border-radius в 50%. Я никогда не задавался вопросом, почему нужно делать именно так, я просто согласился с тем, что если установить радиус как половину высоты/ширины квадрата на всех углах, то я получу круг.

Рассмотрим пример. Пусть у нас есть квадрат размерами 150px на 150px, превратим его в круг, установив радиус для каждого угла в 50%. Согласно стандарту W3C в разделе о border-radius , процентные единицы для border-radius относятся к ширине и к высоте элемента. В моем примере, ширина/высота элемента составляет 150px, таким образом 50% вернет нам значение в 75px.

Преобразование квадрата в круг на CSS свойства border-radius (см. на CodePen)

Как же действительно работает border-radius?

Браузер также будет масштабировать все остальные углы, пока каждый угол не будет иметь радиус 50%, и мы не получим наш круг. Даже если вы укажете радиус в 150px для каждого угла, в действительности вы получите радиус в 75px, так как это максимальное значение которое позволяет установить браузер для каждого угла.

Вывод

По крайней мере, это кажется довольно бессмысленным, если вы заранее знаете, что браузер в любом случае будет масштабировать радиусы до 50%. Использование 50% кажется верным решением.

А для меня время исправить расставленные мною случайные CSS свойства за последнею неделю…

Теги: css, border-radius

Думаю, все знают, что сделать закругленные углы у блоков – большая проблема. Кросс-браузерного решения без применения JS костылей пока не существует. С релизом IE9 головной боли станет меньше, но если вы все еще кипятите верстаете под IE6/7, для вас это не станет спасением. Но даже если IE6/7 канут в лету, еще немало времени пройдет, пока мы забудем о 8-й версии этого браузера, который тоже не поддерживает параметр border-radius. Иными словами, сидеть на яваскриптовых стероидах наши сайты будут еще долго.

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

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

Во-первых, 4-я версия FireFox теперь не нуждается в своем собственном параметре -moz-border-radius. IE9, как я уже говорил, тоже реализует поддержку border-radius, во всяком случае, в RС версии она уже присутствует. В Opera все замечательно с версии 10.5.

Теперь решения для тех, кого Бог обделил.

И так, существует два наиболее известных и применяемых способа сделать border-radius кросс-браузерным . Первый из них – Curved-corner , использующий VML и behaviour . Второй – CSS3 PIE , который имеет две реализации. Одна также основана на VML и behaviour, вторая представляет из себя JavaScript библиотеку.

Рассмотрим оба решения.

Curved-corner

Из плюсов я нашел только один – малый вес подключаемого border-radius.htc файла. Текущая версия реализации занимает всего 5кб. Против PIE, который весит 33 кб, безусловно, это значительное преимущество. Но на этом плюсы заканчиваются, во всяком случае для меня.

Минусов очень много. Например, не будет работать такая вот конструкция:

#selector { border: #c6c5c2 1px solid; border-top: none; border-radius: 0 0 6px 6px; background: #f0ecdf; behavior: url(border-radius.htc); }

Во-первых, нельзя убрать рамку с одной из сторон. То есть параметр border-top прибьет рамку вообще всего блока, хотя углы останутся закругленными. Забавно, но параметр border-bottom рамку оставит на месте, но эффекта никакого не даст, то есть бордер останется вокруг всего блока.

Во вторых, если вам необходимо обтесать всего два угла, как в примере, то вас ждет разочарование. Curved-corner такого не умеет. Он может закруглять только все углы блока и на равное значение радиуса. Углов с разным радиусом закругления добиться не получится. Правильные и рабочий вариант выглядит только так:

#selector { border: #c6c5c2 1px solid; border-radius: 6px; behavior: url(border-radius.htc); }

В-третьих, Curved-corner не работает для блоков, у которых в качестве фона задано изображение.

Ну последний неприятный момент – скорость работы. Углы закругляются далеко не сразу. С момента загрузки страницы и до того, как углы примут нужную форму, проходит около секунды. Визуально задержка очень заметна и хорошо бросается в глаза.

Были еще какие-то проблемы (читайте нюансы), но сейчас уже не припомню.

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

CSS3 PIE

Весит много, ничего не скажешь. Версия PIE 1.0 beta 4 занимает 33 кб, как в реализации.htc, так и js аналог. Но при этом CSS3 PIE лишен всех тех проблем с border-radius, которые есть у Curved-corner. Также мне значительно импонирует возможность использовать JS реализацию, которая не требует дополнительного кода в CSS и может цепляться на любой селектор (при использовании jQuery, например).

У CSS3 PIE задержка в отрисовке также присутствует (иногда нет), но значительно меньшая, чем в случае с Curved-corner. Она практически незаметна, что делает библиотеку весьма привлекательной и пригодной к использованию.

Ну и самое замечательное заключается в том, что CSS3 PIE исправляет проблему не только с border-radius , но и добавляет значительно количество свойств CSS3 в кривые майкрософтовские браузеры. Так, например, будут работать border-image и box-shadow, свойства работы с градиентами. Решается проблема прозрачности png и многое другое. Все это лихо компенсирует и объясняет размере CSS3 PIE.

Еще дегтя

Увы, но ни CSS3 PIE, ни Curved-corner не способны заткнуть собой все щели. Так, например, круглых углов вы не получите у тех элементов, которые изначально скрыты – имеют параметр display: none . Аналогично с параметром visible и его значением hidden . Могут возникнуть проблемы, если элемент позиционируется абсолютно. Увы, дать детальное описание ситуации не могу, так как не удалось повторить условия, при которых возникали проблемы, но помню, что проблемы определенно были.

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

A:hover { background: #ccc; color: #000; border: #ccc 1px solid; border-radius: 6px }

Необходимо, чтобы этот элемент имел закругленные углы изначально, иначе эффекта не будет. То есть, в данном примере, должен быть селектор A, у которого также будет задан border-radius и border:

A { background: #fff; color: #000; border: #fff 1px solid; border-radius: 6px } a:hover { background: #ccc; color: #000; border: #ccc 1px solid; border-radius: 6px }

Итоги

Лично для меня, безусловным фаворитом является CSS3 PIE. Действительно справляется со своей задачей и делает это достойно. Ко всему прочему, библиотека развивается. Это развитие сопровождается регулярным выходом новых версий, что весьма обнадеживает.

). Это делается с помощью свойства CSS border-radius . В этой статье мы рассмотрим все различные варианты.

Синтаксис CSS border-radius :

border-radius : [значение_скругления ];

Как скруглить углы в HTML через CSS

Рассмотрим примеры скругления углов через CSS. Например

В этом случае все 4 края элемента будут скруглены по 30px.

Значение скругления означает то, какой радиус окружности должен быть в уголке.

Можно скруглять каждый угол с разными радиусами. Для этого нужно написать

border-radius : 10px 7px 0px 0px ;

Последовательность этих цифр следующая:

• Верхний левый угол (в примере это 10px)
• Верхний правый угол (в примере это 7px)
• Нижний правый угол (в примере это 0px)
• Нижний левый угол (в примере это 0px)

Например

Результат:

Чтобы не запоминать какое значение за каким идет можно писать в CSS в отдельности каждый угол

border-top-left-radius : 10px ; // верхний левый угол border-top-right-radius : 7px ; // верхний правый угол border-bottom-right-radius : 0px ; // нижний правый угол border-bottom-left-radius : 0px ; // нижний левый угол

Помимо этого, можно также изменять и радиус для каждого угла в отдельности для горизонтальной и вертикальной плоскостей.

Задание второго радиуса нужно задавать через слэш "/" в случае border-radius или вторым значением рядом в случае прямого указания каждого угла радиуса

border-radius : 5px 5px 5px 5px / 10px 10px 10px 10px ; или можно задать так: border-top-left-radius :5px 10px ; // верхний левый угол border-top-right-radius :5px 10px ; // верхний правый угол border-bottom-right-radius :5px 10px ; // нижний правый угол border-bottom-left-radius :5px 10px ; // нижний левый угол

Первый параметр отвечает за горизонтальный радиус, второй за вертикальный.

Например, с помощью этих свойств можно сделать эллипс:

Результат:

Значения 100px 100px 100px 100px / 200px 200px 200px 200px можно было бы написать еще компактнее:

border-radius : 100px / 200px ;

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

Задание толщины, цвета и типа линии при скруглении

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

border : [толщина ] [тип_линии ] [цвет ];

Например:

border : 1px solid #00ff00 ;

• Толщина - задается чаще всего в пикселях
• Тип линии может принимать значения:
  • solid (сплошной)
  • dashed (пунктирный)
  • dotted (ряд точек)
  • groove (линия бороздка)
  • inset (вдавленная линия)
  • outset (выдавленная линия)
• Цвет можно задать либо в формате RGB, либо просто названием (см. коды и названия html цветов)

Приведем пример

Таким образом можно красиво оформлять различные рамки для объявлений, замечаний на сайте.

Свечение для скругления

Помимо задания толщины, цвета и типа линии можно также задавать и свечении рамки. Делается это с помощью свойства box-shadow

box-shadow : 0px 0px 4px 2px #a0b ;

Первые два параметра (0px 0px) задают сдвиг тени по горизонтали и вертикали соответственно. Следующие два параметра (4px 2px) задают силу свечения вокруг. Чтобы получилось красиво нужно делать одну цифру больше другой, а вообще надо экспериментировать. Последний параметр - цвет (#a0b).

Например

Результат:

Мы приводили всегда в качестве примеров тег

. Но таким же образом можно скруглять и table, img, iframe . Чтобы скруглить края у этих элементов нужно всего лишь в стилях CSS элемента прописать border-radius .

Браузеры
Старые браузеры могут не поддерживать свойство border-radius . Так, IE ниже 9 версии, Firefox ниже 4 не отображают закругления. Необходимо прописывать вендорные префиксы CSS :

-webkit-border-radius :5px ; -moz-border-radius :5px ; border-radius :5px ;

The border-radius property does not apply to table elements when have shared or separate borders."> border-collapse is collapse .

Note: As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit , which would partially override existing definitions. Instead, the individual longhand properties have to be used.

Syntax

/* 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; /* Global values */ border-radius: inherit; border-radius: initial; border-radius: unset;

The border-radius property is specified as:

• one, two, three, or four CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> or CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> values. This is used to set a single radius for the corners.
• followed optionally by "/" and one, two, three, or four or Values. This is used to set an additional radius, so you can have elliptical corners.

Values

radius		Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> or a CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.
top-left-and-bottom-right		Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> or a CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> denoting a radius to use for the border in the top-left and bottom-right corners of the element"s box. It is used only in the two-value syntax.
top-right-and-bottom-left		Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> or a CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> denoting a radius to use for the border in the top-right and bottom-left corners of the element"s box. It is used only in the two- and three-value syntaxes.
top-left		Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> or a CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> denoting a radius to use for the border in the top-left corner of the element"s box. It is used only in the three- and four-value syntaxes.
top-right		Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> or a CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> denoting a radius to use for the border in the top-right corner of the element"s box. It is used only in the four-value syntax.
bottom-right		Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> or a CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> denoting a radius to use for the border in the bottom-right corner of the element"s box. It is used only in the three- and four-value syntaxes.
bottom-left		Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> or a CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> denoting a radius to use for the border in the bottom-left corner of the element"s box. It is used only in the four-value syntax.

CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using length values. Negative values are invalid. CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage values. Percentages for the horizontal axis refer to the width of the box; percentages for the vertical axis refer to the height of the box. Negative values are invalid.

Border-radius: 1em/5em; /* ... is equivalent to: */ border-top-left-radius: 1em 5em; border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em; border-radius: 4px 3px 6px / 2px 4px; /* ... is equivalent to: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px;

Formal syntax

1,4 / 1,4

where
=

Examples

border: solid 10px; /* the border will curve into a "D" */ border-radius: 10px 40px 40px 10px; border: groove 1em red; border-radius: 2em; background: gold; border: ridge gold; border-radius: 13em/3em; border: none; border-radius: 40px 10px; border: none; border-radius: 50%; border: dotted; border-width: 10px 4px; border-radius: 10px 40px; border: dashed; border-width: 2px 4px; border-radius: 40px;

Live Samples

Specifications

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3 The definition of "border-radius" in that specification.	Candidate Recommendation	Initial definition

Initial value
Applies to	all elements; but User Agents are not required to apply to table and inline-table elements when have shared or separate borders."> border-collapse is collapse . The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter .
Inherited	no
Percentages	refer to the corresponding dimension of the border box
Media	visual
Computed value	as each of the properties of the shorthand: border-bottom-left-radius : two absolute CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> s or CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> s border-bottom-right-radius : two absolute CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> s or CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> s border-top-left-radius : two absolute CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> s or CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> s border-top-right-radius : two absolute CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> s or CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> s
Animation type	as each of the properties of the shorthand: border-top-left-radius : a CSS data type are interpolated as real, floating-point numbers.">length , CSS data type are interpolated as real, floating-point numbers.">percentage or calc(); border-top-right-radius : a CSS data type are interpolated as real, floating-point numbers.">length , CSS data type are interpolated as real, floating-point numbers.">percentage or calc(); border-bottom-right-radius : a CSS data type are interpolated as real, floating-point numbers.">length , CSS data type are interpolated as real, floating-point numbers.">percentage or calc(); border-bottom-left-radius : a CSS data type are interpolated as real, floating-point numbers.">length , CSS data type are interpolated as real, floating-point numbers.">percentage or calc();
Canonical order	the unique non-ambiguous order defined by the formal grammar

Browser compatibility

The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Basic support	Chrome Full support 4 Notes Full support 4 Notes Notes elements unless -webkit-appearance is overridden to an appropriate value. Full support 1 Prefixed Prefixed	Edge Full support 12 Full support 12 Full support 12 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Firefox Full support 4 Notes Full support 4 Notes Notes Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-style was solid . This has been fixed in Firefox 50. Notes To conform to the CSS3 standard, Firefox 4 changes the handling of values to match the specification. You can specify an ellipse as a border on an arbitrary sized element with border-radius: 50%; . Firefox 4 also makes rounded corners clip content and images if : visible is not set. No support 1 - 12 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE Full support 9	Opera Full support 10.5 Notes Full support 10.5 Notes Notes In Opera prior to version 11.60, replaced elements with border-radius will not have rounded corners.	Safari Full support 5 Notes Full support 5 Notes Notes Current Chrome and Safari versions ignore border-radius on elements unless -webkit-appearance is overridden to an appropriate value. Full support 3 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	WebView Android Full support 2 Prefixed Full support 2 Prefixed Prefixed Implemented with the vendor prefix: -webkit-		Edge Mobile Full support Yes Full support Yes Full support Yes Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Firefox Android Full support Yes Notes Full support Yes Notes Notes Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-style was solid . This has been fixed in Firefox 50.	Opera Android Full support	Safari iOS Full support Yes
Elliptical borders	Chrome Full support Yes Notes Full support Yes Notes Notes Prior to Chrome 4, the slash / notation is unsupported. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px/10px; .	Edge Full support 12	Firefox Full support 3.5	IE Full support Yes	Opera Full support Yes	Safari Full support Yes Notes Full support Yes Notes Notes Prior to Safari 4.1, the slash / notation is unsupported. If two values are specified, an elliptical border is drawn on all four corners. -webkit-border-radius: 40px 10px; is equivalent to border-radius: 40px/10px; .	WebView Android ?	Chrome Android Full support Yes				Safari iOS ?	Samsung Internet Android Full support Yes
4 values for 4 corners	Chrome Full support 4	Edge Full support 12	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes	Safari Full support 5	WebView Android ?	Chrome Android Full support Yes	Edge Mobile Full support Yes	Firefox Android Full support Yes	Opera Android No support No	Safari iOS ?	Samsung Internet Android Full support Yes
Percentages	Chrome Full support Yes Notes Full support Yes Notes Notes Values are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010).	Edge Full support 12	Firefox

Legend

Full support Full support No support No support Compatibility unknown Compatibility unknown See implementation notes. See implementation notes. Requires a vendor prefix or different name for use.

See also

• Border-radius-related CSS properties:

CSS свойства

Определение и применение

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

Радиус скругления применяется ко всему заднему фону, либо фоновому изображению, заданными свойством background (даже если у элемента отсутствуют границы). Точное место отсечения определяется и задается значением свойства background-clip .

1. Скругление углов отсутствует. Значение по умолчанию 0 (ноль).
2. Скругление углов (по типу дуги окружности ). Значение /-я (от одного до четырёх) указываются в единицах измерения CSS (px, em, cm и т.д.) и определяют r adius (радиус) скругления. Значения для каждого радиуса задаются в следующем порядке: top-left (верхний левый угол), top-right (верхний правый угол), bottom-right (нижний правый угол), bottom-left (нижний левый). Если bottom-left (нижний левый) опущен, то он такой же, как top-right (верхний правый угол). Если bottom-right (нижний правый угол) опущен, то он такой же, как top-left (верхний левый угол). Если top-right (верхний правый угол) опущен, то он такой же, как top-left (верхний левый угол). Допускается указывать значения в процентах.
3. Скругление углов (по типу дуги эллипса) . Значения указываются в единицах измерения CSS (px, em, cm и т.д.). Порядок указания значений следующий (нижнее изображение): задаются значение /-я (от одного до четырёх) h orisontal (горизонтального) радиуса скругления, а через косую черту задаются значение /-я (от одного до четырёх) v ertical (вертикального). Допускается указывать значения в процентах. Отрицательные значения недопустимы.

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

Свойство			Opera		IExplorer	Edge
border-radius	5.0 4.0 -webkit-	4.0 3.0 -moz-	10.5	5.0 3.1 -webkit-	9.0	12.0

CSS синтаксис:

border-radius: "1-4 length | 1-4 % | 1-4 length или 1-4 % / 1-4 length или 1-4 % | initial | inherit" ; /* Радиус применяется ко всем четырем углам (по типу дуги окружности) */ border-radius : 15px; /* 1-ое значение top-left и bottom-right, второе top-right и bottom-left */ border-radius : 15px 35%; /* 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right */ border-radius : 14px 18px 50%; /* 1-ое значение top-left, второе top-right, третье bottom-right, четвертое bottom-left */ border-radius : 22% 11px 14px 15px; /
вертикальный радиус - значение применяется ко всем четырем углам */ border-radius : 15px 15% / 15px; /* горизонтальный радиус 1-ое значение top-left и bottom-right, второе top-right и bottom-left /
вертикальный радиус - 1-ое значение top-left и bottom-right, второе top-right и bottom-left */ border-radius : 10px 15% / 10px 40px; /* горизонтальный радиус 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right /
вертикальный радиус - 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right */ border-radius : 20px 15px 6em / 20px 25px 30%; /* горизонтальный радиус 1-ое значение top-left и bottom-right, второе top-right и bottom-left /
вертикальный радиус - 1-ое значение top-left, второе top-right, третье bottom-right, четвертое bottom-left */ border-radius : 15px 15% / 10px 15em 15px 5em;

JavaScript синтаксис:

Object.style.borderRadius = "5px"

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

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Пример использования

class = "orange" > 50px

50px 25%

25px 75% / 4em