Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения
Свойства CSS
align-content align-items align-self animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size 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-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow box-sizing caption-side clear clip color column-count column-gap column-rule column-rule-color column-rule-style column-rule-width columns column-span column-width content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight height justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width min-height min-width opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position quotes resize right table-layout text-align text-decoration text-indent text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index

border-radius

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

12.0+ 9.0+ 4.0+ 5.0+ 10.5+ 5.0+

Описание

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

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

  • border-radius: 5px 10px 15px 20px; (4 значения)
    1. Верхний левый – 5px
    2. Верхний правый – 10px
    3. Нижний правый – 15px
    4. Нижний левый – 20px
  • border-radius: 10px 20px 15px; (3 значения)
    1. Верхний левый – 10px
    2. Верхний правый и нижний левый – 20px
    3. Нижний-правый – 15px
  • border-radius: 15px 5px; (2 значения)
    1. Верхний левый и нижний правый – 15px
    2. Верхний правый и нижний левый – 5px
  • border-radius: 13px; (1 значение)
    1. Радиус для всех четырёх углов – 13px

Овальные скругления

CSS свойство border-radius также позволяет сделать скругление углов ввиде дуги овала, а не круга:

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

border-radius: 50px / 30px;

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

Каждая из двух частей (до слэша и после него) подчиняется тем же правилам, что и при создании круглых скруглений. Это означает, что каждая часть может содержать от одного до четырёх значений, разделяемых между собой пробелами. И от количества заданных значений будет зависеть то, как будут установлены радиусы скругления углов. Например, четыре значения перед символом / представляют горизонтальные радиусы для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. Значения после символа / соответственно представляют вертикальные радиусы для тех же самых углов.

Пример с овальными скруглениями:

  • border-radius: 55px 45px 40px / 35px 20px;
    1. Верхний левый – 55px / 35px
    2. Верхний правый и нижний левый – 45px / 20px
    3. Нижний правый – 40px / 35px

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

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

Значение по умолчанию: 0
Применяется: ко всем элементам, кроме элемента table, когда для него установлено border-collapse: collapse;
Анимируется: да
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.borderRadius="5px"

Синтаксис

border-radius: [величина | проценты]{1,4} [ / [величина | проценты]{1,4} ]

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

Значение Описание
величина Величина радиуса указывается в единицах измерения, используемых в CSS.
% Величина радиуса, указанная в процентах, вычисляется в зависимости от общей ширины и высоты элемента.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

CSS Свойство:
border-radius:
Результат:
CSS Код:
div {
border-radius: 100px;
}
Кликните на любое значение свойства, чтобы увидеть результат
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru | ruen