• ×

    • CSS border: radius, color, style и другие css свойства border. CSS: border

    25.04.2019

    CSS3-рамка дополняет возможности форматирования границ элементов с помощью свойств, позволяющих закруглить углы элемента, а также использовать изображения для оформления границ элемента.

    Закруглённые углы и рамки-изображения

    1. Закругление углов с помощью border-radius

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

    IE: 9.0
    Firefox: 4.0
    Chrome: 4.0
    Safari: 5.0, 3.1 -webkit-
    Opera: 10.5
    iOS Safari: 7.1
    Opera Mini: —
    Android Browser: 4.1
    Chrome for Android: 44

    Свойство позволяет закруглить углы строчных и блочных элементов. Кривая для каждого угла определяется с помощью одного или двух радиусов, определяющих его форму — круга или эллипса . Радиус распространяется на весь фон, даже если элемент не имеет границ, точное положение секущей определяется с помощью свойства background-clip .

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

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

    Значения, заданные через / , определяют горизонтальные и вертикальные радиусы . Свойство не наследуется.

    Варианты

    Div {width: 100px; height: 100px; border: 5px solid;} .r1 {border-radius: 0 0 20px 20px;} .r2 {border-radius: 0 10px 20px;} .r3 {border-radius: 10px 20px;} .r4 {border-radius: 10px/20px;} .r5 {border-radius: 5px 10px 15px 30px/30px 15px 10px 5px;} .r6 {border-radius: 10px 20px 30px 40px/30px;} .r7 {border-radius: 50%;} .r8 {border-top: none; border-bottom: none; border-radius: 30px/90px;} .r9 {border-bottom-left-radius: 100px;} .r10 {border-radius: 0 100%;} .r11 {border-radius: 0 50% 50% 50%;} .r12 {border-top-left-radius: 100% 20px; border-bottom-right-radius: 100% 20px;}
    Рис. 1. Примеры различных вариантов закругления углов блока

    2. Рамки-изображения border-image

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

    IE: 11.0
    Firefox: 15.0, 3.5 -moz-
    Chrome: 16.0, 7.0 -webkit-
    Safari: 6.0, 3.0 -webkit-
    Opera: 15.0, 11.0 -o-
    iOS Safari: 7.1
    Opera Mini: 8 -o-
    Android Browser: 4.4, 4.1 -webkit-
    Chrome for Android: 42

    Свойство позволяет устанавливать изображение в качестве рамки элемента. Основное требование, предъявляемое к изображению — оно должно быть симметричным. Свойство включает в себя следующие значения: {border-image: width source slice repeat outset;} .

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

    /* Пример 1 */ div { width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30; border-image-repeat: stretch; } /* Пример 2 */ div { width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30; border-image-repeat: round; }
    Рис. 2. Пример оформления границ блока с помощью изображения

    Cрезы A — B — C — D образуют углы рамки, а часть рисунка, расположенная между ними, заполняет оставшееся пространство рамки в соответствии с заданным значением свойства border-image-repeat . Размер угловой части (в данном примере это число 30), задается с помощью значения свойства border-image-slice .

    2.1. Ширина рамки-изображения border-image-width

    Свойство задаёт ширину изображения для границы элемента. Если ширина не задана, то по умолчанию она равна 1 .

    border-image-width
    Значения:
    длина Устанавливает ширину рамки в единицах длины — px / em . Можно задавать от одной до четырех значений одновременно. Если задано одно значение, то ширина всех сторон рамки одинакова, два значения задают ширину верхней-нижней и правой-левой и т.д.
    число Числовое значение, на которое умножается значение border-width .
    % Ширина рамки элемента вычисляется относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты.
    auto Соответствует значению border-image-slice .
    initial
    inherit

    Синтаксис

    Div {border-image-width: 30px;} Рис. 3. Пример задания ширины рамки-изображения с помощью различных типов значений

    2.2. Ресурс рамки-изображения border-image-source

    Свойство задаёт путь к изображению, которое будет использоваться для оформления границ блока.

    Синтаксис

    Div {border-image-source: url(border.png);}

    2.3. Элементы рамки-изображения border-image-slice

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

    Значения:
    число Размер частей рамки можно задавать с помощь одного, двух, трех или четырех значений.
    Одно значение устанавливает границы одинакового размера для каждой стороны элемента.
    Два значения: первое определяет размер верхней и нижней границы, второе - правой и левой.
    Три значения: первое определяет размер верхней границы, второе - правой и левой, а третье - нижней границы.
    Четыре значения: определяет размеры верхней, правой, нижней и левой границы.
    Числовое значение представляет количество px .
    % Размеры границ рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты.
    fill Значение указывается вместе с числом или процентным значением. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки.
    initial Устанавливает это свойство в значение по умолчанию.
    inherit Наследует значение этого свойства от родительского элемента.

    Синтаксис

    Div {border-image-slice: 50 20;}
    Рис. 4. Пример задания срезов рамки-изображения

    2.4. Повтор рамки-изображения border-image-repeat

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

    Синтаксис

    Div {border-image-repeat: repeat;} Рис. 5. Пример повтора центральной части рамки-изображения с помощью различных типов значений

    2.5. Смещение рамки-изображения border-image-outset

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

    Синтаксис

    Div {border-image-outset: 10px;}
    Рис. 6. Пример смещения рамки-изображения с помощью различных типов значений

    3. Смещение внешней рамки outline-offset

    Свойство задаёт расстояние между границей элемента border и внешней границей, созданной с помощью свойства outline .

    /*Рисунок 1:*/ img { border: 1px solid pink; outline: 1px dashed grey; outline-offset: 3px; } /*Рисунок 2:*/ img { border-width: 1px 10px; border-style: solid; border-color: pink; outline: 1px dashed grey; outline-offset: 3px; } /*Рисунок 3:*/ img { border: 3px inset pink; outline: 1px dashed grey; outline-offset: 1px; }
    Рис. 7. Пример оформления изображения внешней рамкой

    4. Градиентная рамка

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

    Полупрозрачная рамка

    В качестве одного из цветов выступает transparent . Таким способом можно задавать границы сразу для всех сторон элемента или по отдельности для каждой стороны. Толщина рамки регулируется свойством border-width .

    * {box-sizing:border-box;} .wrap { height: 200px; padding: 25px; background: #00E4F6; } .gradient { height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent; border-image: linear-gradient(to right, transparent 0%, #ADF2F7 100%); border-image-slice: 1; }

    Почтовый конверт

    * {box-sizing:border-box;} .wrap { height: 200px; padding: 25px; } .gradient { height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent; border-image: 10 repeating-linear-gradient(45deg, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px,transparent 30px, transparent 40px); }

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

    Свойство border radius CSS используется для закругления углов элемента. Это сокращенная версия свойств: border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius .

    Оно может принимать от одного до четырех значений или восемь значений, разделенных косой чертой «/» , с одним — четырьмя значениями с каждой стороны от косой черты.

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

    border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?; // "?" указывать данное значение необязательно

    • Если задано четыре значения, то они определяют радиусы каждого из четырех углов. То есть первое значение будет указывать x и y радиуса верхнего левого угла, таким образом, это будет круговая кривая. Второе значение задает радиусы для верхнего правого угла, третье — определяет радиусы нижнего правого угла, а четвертое — нижнего левого;
    • Если задано три значения, первое устанавливает радиус верхнего левого угла, второе — радиус верхнего правого и левого нижнего углов, а третье — нижнего правого угла;
    • Если задано два значения CSS table border radius , первое определяет радиусы левого верхнего и правого нижнего углов, а второе — радиусы верхнего правого и нижнего левого углов;
    • Если задано одно значение, то оно задает одинаковые радиусы четырех углов.

    Например:

    border-radius: 1em 3em 2em;

    эквивалентно:

    border-top-left-radius: 1em; border-top-right-radius: 3em; border-bottom-right-radius: 2em; border-bottom-left-radius: 3em;

    В каждом из перечисленных выше случаев, когда не используется косая черта, четыре угла элемента будут закруглены, а их кривизна будет идеальным кругом:

    Два одинаковых радиуса для каждого угла дают круговую кривую. Каждый угол в этом примере имеет горизонтальный и вертикальный радиус 50 пикселей.

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

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

    Например:

    border-radius: 2em 1em 4em / 0.5em 3em;

    эквивалентно:

    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;

    В этом случае применения border radius CSS углы элемента будут закруглены, и их кривизна будет эллиптической:


    Два неодинаковых радиуса для каждого угла дают эллиптическую кривизну. Каждый угол в этом примере имеет горизонтальный радиус 100 пикселей и вертикальный радиус 50 пикселей.

    Общая информация и примечания

    Если элемент использует фоновый цвет или изображение, фон также будет обрезаться указанным радиусом границы:


    Фоновое изображение элемента обрезается в соответствии с указанным радиусом границы.

    Но иногда цвет фона элемента может «просачиваться » за пределы границы, когда она закруглена. Чтобы исправить это, можно использовать свойство background-clip и установить для него значение padding-box .

    Element { border-radius: 30px; background-clip: padding-box; }

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

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


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

    В этом примере moz border radius CSS добавлены отступы, чтобы содержимое не выходило за закругленные углы границы. Обратите внимание, что сама граница не отображается, но фон все равно будет иметь закругленные углы.

    Element { background: black; color: white; border-radius: 1em; padding: 1em; }

    Кроме этого область вне кривой границы не принимает pointer events , связанные с данным элементом.

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

    Процентные значения идеально подходят для создания круглых или эллиптических форм. Использование border radius CSS: 50% дает полностью круглую форму элемента, у которого высота и ширина равны:


    Элемент с одинаковой высотой, шириной и значением радиуса границы 50%.

    Если высота и ширина элемента не равны, мы получим эллиптическую форму:


    Элемент с радиусом границы 50%, высота и ширина которого не равны.

    Официальный синтаксис

    Синтаксис:

    border-radius: [<длина> | <проценты>] {1,4} {1,4}]?

    Начальное значение: 0 0 0 0, оно задает начальное значения каждого из отдельных свойств.

    Применяется: ко всем элементам. Но браузеры не обязательно должны применять его к элементам table и inline-table , когда для свойства border-collapse задано значение collapse . На данный момент поведение внутренних элементов таблицы не определено.

    Анимируется: Каждое из полных свойств анимируется, как два значения длины, процентных значения или значения calc() . Когда оба значения являются длинами, они интерполируются как длины. Когда оба значения являются процентами, они интерполируются в процентах. Иначе оба значения преобразуются свойством calc() .

    Значения

    Неофициальный синтаксис webkit border radius CSS :

    border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?;

    border-radius: [верхний левый горизонтальный радиус] [верхний правый горизонтальный радиус]? [нижний правый горизонтальный радиус]? [нижний левый горизонтальный радиус]? / [верхний левый вертикальный радиус] [верхний правый вертикальный радиус]? [нижний правый вертикальный радиус]? [нижний левый вертикальный радиус]?

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

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

    border-radius: 50%; border-radius: 30px 20px 40px; border-radius: 1em 2em; border-radius: 3em / 2em 4em; border-radius: 1em 2em 1em 3em / 2em 3em;

    Демо-версия

    В последнее время я пытался переосмыслить правила 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?

    Иногда я вижу реализацию данной дизайнерской задумки путем установки border-radius в 100%. Я сам сделал также в своем проекте несколько дней назад, даже не задумываясь. Это выглядело точно также, образуя идеальный круг. Но почему?

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

    Вывод

    Если установить радиус границы в 100% для всех углов элемента, браузер за кулисами выполнит дополнительную работу, чтобы масштабировать углы до тех пор, пока они не сойдутся. Я не уверен, есть ли какие-то последствия в плане производительности при установке border-radius в 100% для всех ваших кругов.

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

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

    Теги: css, border-radius

    В предыдущем уроке мы изучили, как задать границу для элемента. Также были рассмотрены такие свойства как border-color и border-style , с помощью которых можно настраивать цвет и стиль границы. Однако все рамки у нас получались с прямыми углами. Теперь мы расскажем, каким образом можно сделать закругленные углы в CSS для границ.

    Как закруглить углы: свойство CSS3 border-radius

    Закругление углов в CSS можно сделать для любого элемента HTML-страницы. Для этого необходимо применить к нему свойство border-radius с соответствующим значением. Чаще всего значение указывается в пикселях, но можно также использовать и другие единицы, например, em или проценты (в последнем случае вычисление производится относительно ширины блока).

    Эффект данного свойства будет заметен только при условии, что у стилизуемого элемента имеется цветной фон и/или граница. Например:

    BorderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; }

    Стиль, описанный выше, даст следующий результат на элементе

    размером 200×200 пикселей:


    Вы также можете сделать закругленные края только для верхних или нижних углов элемента либо задать каждому углу разный радиус скругления - большое поле для фантазии! Пример:

    BorderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; } .borderElement1 { background-color: #FFE8DB; border: 6px solid #FF5A00; border-radius: 15px 100px 15px 100px; }

    Но и это еще не всё: вместо простых круглых углов можно задавать эллиптическое скругление. Для этого понадобится указать два значения, разделенные косой чертой (для горизонтальной и вертикальной полуосей эллипса). Приведем пример на блоке размером 150×450 пикселей:

    BorderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 280px/100px; }

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

    • border-top-left-radius - для верхнего левого угла;
    • border-top-right-radius - для верхнего правого угла;
    • border-bottom-left-radius - для нижнего левого угла;
    • border-bottom-right-radius - для нижнего правого угла.

    Принцип скругления углов

    На рисунке ниже показано, каким образом вычисляется скругление углов в CSS. Так, если для угла указано одно значение, - например, 20px , - это означает, что закругление будет происходить по окружности с радиусом 20 пикселей. В случае, когда задаются два значения через косую черту, например, 30px/20px , закругление углов будет происходить по эллипсу. Первое значение в таком случае является длиной горизонтальной полуоси эллипса - 30px , а второе - длиной вертикальной полуоси - 20px:



    Свойство CSS border-radius поддерживается всеми современными версиями браузеров.

    Похожие статьи
     
    Категории
    Видеоматериалы
    Популярное
    Новое