Border radius html: border-radius — CSS | MDN

02.10.2019 Разное

border-radius — CSS | MDN

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

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Это свойство является короткой записью для четырёх свойств border-top-left-radius (en-US), border-top-right-radius (en-US), border-bottom-right-radius (en-US) иborder-bottom-left-radius (en-US).

Скругление применяется ко всему background, даже если элемент не имеет границ, точное положение отсечения определяется свойством background-clip.

Свойство border-radius не применяется к элементам таблицы, когда свойство

Замечание: Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в border-radius:0 0 inherit inherit, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.

border-radius: 10px;


border-radius: 10px 5%;


border-radius: 2px 4px 2px;


border-radius: 1px 0 3px 4px;



border-radius: 10px 5% / 20px;


border-radius: 10px 5% / 20px 30px;


border-radius: 10px 5px 2em / 20px 25px 30%;


border-radius: 10px 5% / 20px 25em 30px 35em;


border-radius: inherit;
border-radius: initial;
border-radius: unset;

Свойство border-radius может быть задано как:

• одно, два, три или четыре значения <length> или <percentage>. Используется для задания обычного радиуса углов.
• одна, две, три или четыре пары значений <length> or <percentage>, разделённые «/». Используется для задания эллиптического скругления.

Значения

<length>

Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.

<percentage>

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

Например:

border-radius: 1em/5em;


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;


border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;
 

Формальный синтаксис

  border: solid 10px;
  /* угол изгибается в виде '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;

BCD tables only load in the browser

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

Свойство border-radius устанавливает радиус скругления уголков рамки.

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

Синтаксис

/* 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;
 

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел. Также допустимо писать два значения через слэш (

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

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

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

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

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

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>
 
 

CSS свойство border-radius

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

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

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

Тем не менее, при необходимости можно устанавливать радиус для каждого угла отдельно. При этом соблюдаются следующие правила:

• 4 значения: первое значение — верхний левый угол, второе — верхний правый угол, третье — нижний правый угол и четвертое значение — нижний левый угол
• 3 значения: первое значение — верхний левый угол, второе значение — верхний правый и нижний левый углы и третье значение — нижный правый угол
• 2 значения: первое значение — верхний левый и нижний правый углы, второе значение — верхний правый и нижний левый углы
• 1 значение: у всех четырех углов одинаковый радиус скругления

CSS синтаксис

border-radius: радиус|% [ / радиус|%] | initial | inherit;

Возможные значения

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

Например,

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

то же самое, что

div {
   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;
}

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

У элементов <div> делаем углы рамки скругленными

div {
     border: 2px solid;
     border-radius: 25px;
}

Закругление углов в css: border-radius

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

Работа свойства очень просто, рассмотрим на примере:

Более подробное создание:

<!DOCTYPE HTML>
<html lang="ru">
<head>

</head>
<body>
 
Блок с загруглением 10px
</body>
</html>

Результат:

Свойство border-radius — скругленные уголки

Свойство border-radius создает скругленные уголки для границы и фона. Значением свойства служат любые единицы для размеров. Значение по умолчанию: 0. Является сокращением для свойств border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Синтаксис

селектор { border-radius: значение; }

Количество значений

Свойство может принимать 1, 2, 3 или 4 значений, указываемых через пробел:

Эллиптическое скругление

Два значения через слеш устанавливают эллиптическое скругление. Значение перед слешем указывает горизонтальное скругление, а значения после слеша — вертикальное:

селектор { border-style: горизонтальное / вертикальное; }

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

Пример

Установим скругление 10px для всех углов:

<div></div> #elem { border-radius: 10px; border: 1px solid black; width: 300px; height: 100px; }

:

Пример

Посмотрим, как выглядит скругления для границы в виде точек:

<div></div> #elem { border-radius: 10px; border: 1px dotted black; width: 300px; height: 100px; }

:

Пример

Установим скругление в 10px для углов одной диагонали, и скругления в 40px — для углов второй диагонали:

<div></div> #elem { border-radius: 10px 40px; border: 1px solid black; width: 300px; height: 100px; }

:

Пример

Установим скругление в 10px для верхнего левого угла, скругление в 30px для нижнего правого угла, и скругления в 50px — для углов второй диагонали:

<div></div> #elem { border-radius: 10px 50px 30px; border: 1px solid black; width: 300px; height: 100px; }

:

Пример

Установим различные скругления для каждого из углов:

<div></div> #elem { border-radius: 10px 30px 50px 70px; border: 1px solid black; width: 300px; height: 100px; }

:

Пример

Давайте сделаем эллиптическое скругление, установив 20px для горизонтальной части скругления, а 40px — для вертикальной:

<div></div> #elem { border: 1px solid black; border-radius: 20px / 40px; width: 300px; height: 100px; }

:

Пример

А сейчас установим разное эллиптическое скругление для всех углов по отдельности:

<div></div> #elem { border: 1px solid black; border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px; width: 300px; height: 100px; }

:

Пример

Если поставить для квадратного блока скругления, равное половине стороны квадрата, то получится круг:

<div></div> #elem { border-radius: 100px; border: 1px solid black; width: 200px; height: 200px; }

:

Пример

Если поставить скругление, большее чем сторона квадрата, то все равно получится круг:

<div></div> #elem { border-radius: 200px; border: 1px solid black; width: 200px; height: 200px; }

:

Пример

Круг можно также получить, если установить border-radius в 50% (преимущество в том, что при изменении размеров квадрата не придется менять скругление):

<div></div> #elem { border: 1px solid black; border-radius: 50%; width: 200px; height: 200px; }

:

Пример

Если установить border-radius в процентах для прямоугольника, то получится эллиптическое скругление. Если ширина задана в 400px, высота в 200px, а border-radius в 10%, то это все равно, как если бы было написано border-radius: 40px/20px;. Эти значения получились отсюда: 40px = 400px*10%, 20px = 200px*10%:

<div></div> #elem { border-radius: 10%; border: 1px solid black; width: 400px; height: 200px; }

:

Пример

Установим значение border-radius в 50% для прямоугольника — получится эллипс:

<div></div> #elem { border-radius: 50%; border: 1px solid black; width: 400px; height: 200px; }

:

Пример

Свойство border-radius скругляет не только уголки не границы, но и фона:

<div></div> #elem { border-radius: 20px; width: 300px; height: 100px; background-color: #e4f1ed; }

:

Смотрите также

• свойство border,
  которое является свойством-сокращением для границы

border, border-radius | lesson-web.ru

Итак, давайте изучим новое CSS-свойство, которое называется «border». Оно позволяет сделать вокруг нашего бокса либо прямоугольника, рамочку. Для этого мы пишем свойство «border» и  набор непонятных символов.

.box{
  border: 5px solid #ddd;
}

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

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

Как мы это сделали? Давайте теперь понимать. У нас в «border’е» всегда указывается три параметра.

1) Первое – это толщина рамки, в данном случае 5px.

2) «Solid» – тип рамки, то есть она может быть сплошная, точечками, в общем, очень много есть разных параметров, я в основном использую либо «solid» – сплошной, либо «dotted» – точечками и ещё есть «dashed» – это пунктирными линиями. Другие типы я прикреплю в приложении к этому уроку, там вы можете посмотреть другие типы, потестировать их. Сейчас я на них останавливаться не буду. Cамые часто используемые – это «solid», «dotted» и «dashed».

3) И третий параметр – это цвет рамки. Как задаётся цвет, мы с вами уже изучали, точно так же либо HEX-ом, либо через rgba, либо через rgb – без разницы. Главное, чтобы его задать. 

Всё, на самом деле, очень просто: задаём «border», дальше толщину рамки, тип рамки и цвет рамки. Всё  логично.

«Border», на самом деле, делится ещё на несколько подтипов «border’ов» и их очень много. Ну, как бы их очень много, но на самом деле их очень мало, просто есть некоторая логика, чтобы из очень мало сделать очень много. Сейчас об этом и поговорим. 

Итак, первое – мы можем сделать рамку только сверху, либо только справа, либо только снизу иии… барабанная дробь… Как ещё? Правильно – слева! «Border-left». То есть «border-top», «border-right», «border-bottom» и «border-left».

.box{
  border-left: 5px solid #ddd;
  border-right: 5px solid #ddd;
  border-bottom: 5px solid #ddd;
  border-top: 5px solid #ddd;
}

Так же, мы можем задать еще 3 подсвойства:

1) -width

Мы можем задать «border-width» и перезадать значение толщины. 

.box{
  border: 5px solid #ddd;
  border-width: 10px;
}

2) -style

Далее вы можете задать «border-style».

.box{
  border: 5px solid #ddd;
  border-style: dashed;
}

Вы можете изменить его на «dashed». 5px осталось, мы не меняем сейчас, но изменили на «dashed». 

3) -color

Ещё один параметр, который мы можем изменить – это «border-color» и здесь, соответственно, мы меняем цвет.

.box{
  border: 5px solid #000;
  border-color: #999;
}

Давайте изменим на такой вот светло-серенький. Цвет изменился с чёрненого на светло-серенький. 

Так же, мы можем использовать эти подпараметры для border-top, -right, -bottom, -left. Например, вот так: 

.box{
  border: 5px solid #000;
  border-top-color: #999; 
  border-bottom-width: 20px;
  border-right-style: dotted;
}

И давайте я ещё дополню одним свойством, котрое называется «border-radius». С помощью него мы можем сглаживать углы.

.box{
  border: 5px solid #000;
  border-radius: 20px;
}

Соответственно, тот радиус, который вы задаёте, таким радиусом сглаживаются ваши углы. И теперь, внимание, если «border-radius» задать размерностью в половину ширины и высоты, то неожиданно квадрат превращается в круг. Но чтобы каждый раз не считать количество пикселей, то можете просто задать 50% сглаживания, и тогда всегда получится ровный круг. 

.box{
  border: 5px solid #000;
  border-radius: 50%;
}

В общем, вывод: вы можете сглаживать углы и можете сделать из квадратика кружочек, для этого радиус делаете 50%. И теперь на будущее вы можете делать не только квадратики и прямоугольнички, но так же и кружочки. 

border-radius CSS | CSS

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

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

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

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 пикселей.

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

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

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

Например:

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: [верхний левый горизонтальный радиус] [верхний правый горизонтальный радиус]? [нижний правый горизонтальный радиус]? [нижний левый горизонтальный радиус]? / [верхний левый вертикальный радиус] [верхний правый вертикальный радиус]? [нижний правый вертикальный радиус]? [нижний левый вертикальный радиус]?

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

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

<percentage>
<length>

Примеры

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;

Демо-версия

Свойство CSS3 Border-radius (закругленные углы)

Метод закругления углов. Охватывает поддержку сокращенного свойства border radius CSS, а также полных свойств (например, `border-top-left-radius`).

Поддерживается со следующих версий:

Стационарные

Мобильные

* требуется указание префикса

Данная публикация является переводом статьи «border-radius» , подготовленная редакцией проекта.

border-radius — CSS: Каскадные таблицы стилей

Свойство CSS border-radius округляет углы внешней границы элемента. Вы можете установить один радиус для создания круглых углов или два радиуса для создания эллиптических углов.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

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

Свойство border-radius не применяется к элементам таблицы, когда border-collapse равно collapse .

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

Это свойство является сокращением для следующих свойств CSS:

 

радиус границы: 10 пикселей;


радиус границы: 10 пикселей 5%;


радиус границы: 2px 4px 2px;


радиус границы: 1px 0 3px 4px;



радиус границы: 10 пикселей / 20 пикселей;


радиус границы: 10 пикселей 5% / 20 пикселей 30 пикселей;


радиус границы: 10px 5px 2em / 20px 25px 30%;


радиус границы: 10px 5% / 20px 25em 30px 35em;


граница-радиус: наследовать;
радиус границы: начальный;
граница-радиус: не задано;
  

Свойство border-radius указано как:

• одно, два, три или четыре <длина> или <процент> значений.Используется для установки единого радиуса для углов.
• , за которым необязательно следует «/» и одно, два, три или четыре значения <длина> или <процент> . Это используется для установки дополнительного радиуса, чтобы вы могли иметь эллиптические углы.

Значения

<длина>

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

<процент>

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

Например:

  border-radius: 1em / 5em;


граница-верх-левый-радиус: 1em 5em;
граница-верх-правый-радиус: 1em 5em;
граница-нижний-правый-радиус: 1em 5em;
граница-нижний-левый-радиус: 1em 5em;
  

  радиус границы: 4px 3px 6px / 2px 4px;


граница-верх-левый-радиус: 4px 2px;
граница-верх-правый-радиус: 3px 4px;
граница-нижний-правый-радиус: 6px 2px;
граница-нижний-левый-радиус: 3px 4px;
  

 граница: сплошная 10 пикселей;
  / * граница будет изгибаться в 'D' * /
  радиус границы: 10 пикселей 40 пикселей 40 пикселей 10 пикселей;
 

 бордюр: паз 1em красный;
  радиус границы: 2em;
 

 фон: золото;
  бордюр: хребет золото;
  радиус границы: 13em / 3em;
 

 граница: отсутствует;
  радиус границы: 40 пикселей 10 пикселей;
 

 граница: отсутствует;
  радиус границы: 50%;
 

 граница: пунктирная;
  ширина границы: 10 пикселей 4 пикселей;
  радиус границы: 10 пикселей 40 пикселей;
 

 граница: пунктирная;
  ширина границы: 2px 4px;
  радиус границы: 40 пикселей;
 

Live Samples

Таблицы BCD загружаются только в браузере

border-top-left-radius — CSS: Cascading Style Sheets

Свойство CSS border-top-left-radius округляет верхний левый угол элемента, указывая радиус (или радиус большой и малой полуосей) эллипса, определяющего кривизну угол.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

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

Фон, являющийся изображением или цветом, обрезается по краю, даже если он закруглен; точное место отсечения определяется значением свойства background-clip .

 

граница-верх-левый-радиус: 3 пикселя;



граница-верхний-левый-радиус: 0.5em 1em;

граница-верх-левый-радиус: наследовать;
  

С одним значением:

• значение — <длина> или <процент> , обозначающее радиус круга, который будет использоваться для границы в этом углу.

С двумя значениями:

• первое значение — <длина> или <процент> , обозначающее горизонтальную большую полуось эллипса, используемую для границы в этом углу.
• второе значение — <длина> или <процент> , обозначающее большую вертикальную полуось эллипса, используемую для границы в этом углу.

Значения

<длина-процент>

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

Примеры различных значений радиуса в верхнем левом углу границы

  div {
  граница-верх-левый-радиус: 40 пикселей 40 пикселей;
}
  

  div {
  граница-верх-левый-радиус: 40 пикселей 20 пикселей;
}
  

  div {
  граница-верх-левый-радиус: 40%;
}
  

  div {
  граница-верх-левый-радиус: 40%;
}
  

  div {
  граница-верх-левый-радиус: 40%;
  граница: двойной черный цвет 3px;
  цвет фона: rgb (250,20,70);
  фон-клип: контент-поле;
}
  

Таблицы BCD загружаются только в браузере

border-top-right-radius — CSS: Cascading Style Sheets

Свойство CSS border-top-right-radius округляет верхний правый угол элемента, указывая радиус (или радиус большой и малой полуосей) эллипса, определяющего кривизну угол.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

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

Фон, являющийся изображением или цветом, обрезается по краю, даже если он закруглен; точное место отсечения определяется значением свойства background-clip .

 

граница-верх-правый-радиус: 3 пикселя;



граница-верх-правый-радиус: 0.5em 1em;

граница-верх-правый-радиус: наследовать;
  

С одним значением:

• значение — <длина> или <процент> , обозначающее радиус круга, который будет использоваться для границы в этом углу.

С двумя значениями:

• первое значение — <длина> или <процент> , обозначающее горизонтальную большую полуось эллипса, используемую для границы в этом углу.
• второе значение — <длина> или <процент> , обозначающее большую вертикальную полуось эллипса, используемую для границы в этом углу.

Значения

<длина-процент>

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

Примеры различных значений радиуса border-top-right-radius

  div {
  граница-верх-правый-радиус: 40 пикселей 40 пикселей;
}
  

  div {
  граница-верх-правый-радиус: 40 пикселей 20 пикселей;
}
  

  div {
  граница-верх-правый-радиус: 40%;
}
  

  div {
  граница-верх-правый-радиус: 40%;
}
  

  div {
  граница-верх-правый-радиус: 40%;
  стиль границы: черный 3 пикселя двойной;
  цвет фона: rgb (250,20,70);
  фон-клип: контент-поле;
}
  

Таблицы BCD загружаются только в браузере

border-radius · Документы WebPlatform

Резюме

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

Обзорная таблица

Начальное значение

0

Относится к

Все элементы, кроме элемента таблицы, когда border-collapse свернут

Унаследовано

Нет

Медиа

визуальный

Расчетное значение

Как указано в отдельных свойствах

Анимационный

Да

Свойство объектной модели CSS

граница Радиус

В процентах

См. Соответствующий размер (ширину или высоту) рамки.

Синтаксис

• Граница-радиус: длина
• border-radius: длина / длина
• border-radius: процент
• border-radius: процент / процент

Значения

длина

Обозначает размер радиуса круга или горизонтального и вертикального радиусов для эллиптических кривых. Он может быть выражен в любых единицах, разрешенных в типах данных CSS .Единицы em полезны для элементов управления, масштабируемых пропорционально размеру шрифта. Относительные единицы области просмотра (vw, vh, vmin, vmax) могут быть полезны для элементов управления, которые масштабируются с размером области просмотра. Отрицательные значения недопустимы. Вы можете указать одну длину для всех четырех углов или две, три или четыре длины, чтобы указать разную длину для разных углов: дополнительные сведения см. В разделе синтаксиса.

процентов

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

длина / длина

Указание двух наборов значений длины, разделенных косой чертой, приравнивается к указанию отдельных длин для радиусов X и Y углов, что приводит к эллиптическим углам, если радиусы X и Y имеют разную длину.Каждый набор может состоять из одного, двух, трех или четырех значений.

процент / процент

Указание двух наборов процентных значений, разделенных косой чертой, приравнивается к указанию отдельных процентов для радиусов X и Y углов, что приводит к эллиптическим углам, если радиусы X и Y имеют проценты, приводящие к различным вычисленным значениям (в зависимости от ширины и высота элемента, разные проценты могут привести к одним и тем же вычисленным значениям; см. раздел примечаний для получения дополнительной информации).Каждый набор может состоять из одного, двух, трех или четырех значений.

Примеры

Пример одного значения

  border-radius: 1em;



граница-верх-левый-радиус: 1em;
граница-верх-правый-радиус: 1em;
граница-нижний-правый-радиус: 1em;
граница-нижний-левый-радиус: 1em;
  

Посмотреть живой пример

Пример нескольких значений

  border-radius: 20px 1em 1vw / 0.5em 3em;

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

граница-верх-левый-радиус: 20px 0.5em;
граница-верх-правый-радиус: 1em 3em;
граница-нижний-правый-радиус: 1vw 0.5em;
граница-нижний-левый-радиус: 1em 3em;
  

Посмотреть живой пример

Создайте эллипс, если только

  border-radius: 50%;


  

Посмотреть живой пример

Кривые усадки во избежание перекрытия

  border-radius: 100% 150%;



радиус границы: 40% 60%;


  

Посмотреть живой пример

Использование

  Как и в случае любого сокращенного свойства, индивидуальные унаследованные значения невозможны, то есть border-radius: 0 0 inherit inherit, которое частично переопределит существующие определения.В этом случае необходимо использовать отдельные свойства от руки.
  

Синтаксис

border-radius может принимать от одного до четырех значений:

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

Банкноты

Замечания

• Свойство border-radius является составным свойством, которое определяет до четырех свойств border — * — radius .Если значения указаны до и после косой черты, значения перед косой чертой задают горизонтальный радиус, а значения после косой черты задают вертикальный радиус. Если косой черты нет («/»), значения устанавливают оба радиуса одинаково. Четыре значения для каждого радиуса указаны в порядке по часовой стрелке, начиная с верхнего левого угла. Если указано менее четырех значений, они повторяются до тех пор, пока мы не получим четыре значения, аналогично другим свойствам CSS, таким как border-width.
• Можно получить эллиптические углы, даже указав один радиус.Это происходит, когда вы используете проценты, поскольку они разрешаются к разному числу для каждой оси (по горизонтали это проценты от ширины рамки, по вертикали от высоты). Для демонстрации см. Пример эллипса выше (пример №3)
• Поскольку border-radius округляет рамку границы элемента, внутренние углы (padding box) будут иметь меньшие радиусы (в частности, border-radius — border-width) или даже не закругление, если граница толще, чем border-radius значение.Другим следствием этого является то, что при разной ширине границ на смежных сторонах изгибы поля заполнения будут эллиптическими.
• Обратите внимание, что хотя в сокращении border-radius есть косая черта (/) для отделения горизонтального от вертикального радиусов, они разделены пробелом в длинных частях.

Связанные спецификации

CSS Backgrounds and Borders Module Уровень 3: Закругленные углы:

Кандидат в рекомендации

CSS Backgrounds and Borders Module Уровень 4: Закругленные углы:

Проект редакции

См. Также

Статьи по теме

Граница

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

Атрибуции

граница-верх-левый-радиус | Codrops

Свойство border-top-left-radius используется для закругления верхнего левого угла элемента.

Свойство принимает одно или два значения, которые определяют радиусы четверти эллипса, определяющего форму угла внешнего края границы (см. Диаграмму ниже). Первое значение — это горизонтальный радиус, второе — вертикальный радиус. Если второе значение опущено, оно копируется из первого. Если любая длина равна нулю, угол квадратный, а не закругленный. Проценты для горизонтального радиуса относятся к ширине рамки, тогда как проценты для вертикального радиуса относятся к высоте рамки.Отрицательные значения не допускаются.

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

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

Общая информация и заметки

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

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

.element {
    радиус границы: 30 пикселей;
    фон-клип: обивка-поле;
}
                 

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

Содержимое элемента может выходить за пределы элемента по закругленным углам, если элемент не имеет достаточного заполнения, чтобы «протолкнуть» содержимое внутрь. (См. Изображение ниже)

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

.element {
    фон: черный;
    цвет белый;
    радиус границы: 1em;
    заполнение: 1em;
}
                 

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

Значения

Неофициальный синтаксис выглядит так:

border-top-left-radius: [горизонтальный радиус] [вертикальный радиус] ?;
                 

Каждый из радиусов может иметь значение <длина> или <процент> .

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

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

<процент>

Список возможных значений см. В записи <процент> .

<длина>

Список возможных значений см. В записи .

Примеры

граница-верх-левый-радиус: 50%;
граница-верх-левый-радиус: 30 пикселей;
граница-верх-левый-радиус: 100 пикселей 50 пикселей;
граница-верх-левый-радиус: 20% 30%;
                 

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

* обозначает обязательный префикс.

• Поддерживается:
• Да
• Нет
• Частично
• Polyfill

Статистика по caniuse.com

CSS3 свойство border-radius

Пример

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

  .red_div {
  цвет фона: красный;
  ширина: 200 пикселей;
  высота: 100 пикселей;
}
  

  радиус границы: 15px 15px;
  

  радиус границы: 15px 15px 15px;
  

  радиус границы: 15px 15px 15px 15px;
  

  граница-верх-левый-радиус: 15 пикселей;
граница-верх-правый-радиус: 15 пикселей;
граница-нижний-правый-радиус: 15 пикселей;
граница-нижний-левый-радиус: 15 пикселей;
  

  кнопка {
  ширина: 200 пикселей;
  высота: 100 пикселей;
  радиус границы: 20 пикселей;
}