Содержание

border-top-left-radius | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+10.5+3.0+1.0+2.1+1.0+

Краткая информация

Значение по умолчанию0
НаследуетсяНет
Процентная записьДа, относительно ширины блока
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/css3-background/#border-top-left-radius

Версии CSS

Описание

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

Синтаксис

border-top-left-radius: [значение | проценты] [значение | проценты]

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали (рис. 1).

Рис. 1. Радиус скругления для создания разных типов уголков

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE htm>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-top-left-radius</title>
  <style>
   .title {
    background: #000080; /* Цвет фона */
    color: #ffe; /* Цвет текста */
    padding: 7px; /* Поля вокруг текста */ 
    border-top-left-radius: 10px; /* Левый верхний уголок */
    border-top-right-radius: 10px; /* Правый верхний уголок */
   }
   .content {
    border: 1px solid #000080;  /* Параметры рамки */
    background: #f0f0f0; /* Цвет фона */
    padding: 7px; /* Поля вокруг текста */ 
    border-bottom-left-radius: 10px; /* Левый нижний уголок */
    border-bottom-right-radius: 10px; /* Правый нижний уголок */
   }
  </style>
 </head> 
 <body> 
  <div>Буквица</div>
   <div>
    Буквица является художественным приемом оформления текста и 
    представляет собой увеличенную первую букву, базовая линия 
    которой ниже на одну или несколько строк базовой линии 
    основного текста. 
   </div>
 </body> 
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Радиус скругления в браузере Safari

Браузеры

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius-topleft.

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-top-left-radius.

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-collapse (en-US) имеет значение collapse.

Замечание: Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в 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;

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел. Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчёт ведётся относительно ширины блока.

Табл. 1. Зависимость от числа значений
Число значенийРезультат
1Радиус указывается для всех четырех уголков.
2Первое значение задаёт радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3Первое значение устанавливает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого угол ка.
4		По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.

В случае задания двух параметров через слэш, то первый задаёт радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 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>

border-top-left-radius | CSS справочник

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

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

Описание

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

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

border-top-left-radius: 10px 20px;

Примечание: чтобы был виден эффект от применения свойства border-top-left-radius нужно, чтобы для элемента была установлена видимая рамка или фон.

Значение по умолчанию: 0
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.borderTopLeftRadius=»5px»

Синтаксис

border-top-left-radius: величина|% [величина|%]|inherit;

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

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

Пример

div {
border-top-left-radius: 100px;
}

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

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

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

Фон

Синтаксис

/* the corner is a circle */
/* border-bottom-left-radius: radius */
border-bottom-left-radius: 3px;

/* Percentage values */
border-bottom-left-radius: 20%; /* corner of a circle if box is a square or else corner of a rectangle */
border-bottom-left-radius: 20% 20%; /* same as above */ /* 20% of horizontal(width) and vertical(height) */
border-bottom-left-radius: 20% 10%; /* 20% of horizontal(width) and 10% of vertical(height) */

/* the corner is an ellipsis */
/* border-bottom-left-radius: horizontal vertical */
border-bottom-left-radius: 0.5em 1em;

border-bottom-left-radius: inherit;

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали (рис. 1).

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

border-bottom-left-radius: 0;

Применяется ко всем элементам

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

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

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-bottom-left-radius</title>
    <style>
      .radius {
        background: #fc0;
        padding: 15px;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div
     
     
    >
      border-bottom-left-radius: 20px
    </div>
    <div
     
     
    >
      border-bottom-left-radius: 70px 40px
    </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;

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

ЗначениеОписание
радиусУстанавливает радиус скругления в допустимых в CSS значениях (px, cm, in, em и др.). Значение по умолчанию 0.
%Устанавливает радиус скругления в процентах от ширины блока.
inheritЗначение наследуется от родительского элемента.
initialУстанавливает значение по умолчанию.

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

Например,


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

Свойство 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 значений, указываемых через пробел:

КоличествоОписание
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-top-left-radius — CSS: каскадные таблицы стилей

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

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

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

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

Примечание: Если значение этого свойства не установлено в сокращенном свойстве border-radius , которое применяется к элементу после свойства CSS border-top-left-radius , значение этого свойства затем сбрасывается. к его начальному значению сокращенным свойством.
 

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



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

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

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

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

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

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

Значения

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

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

Живой пример Код
В качестве границы используется дуга эллипса.
  div {
  граница-верх-левый-радиус: 40 пикселей 40 пикселей;
}
В качестве границы используется дуга эллипса.
  div {
  граница-верх-левый-радиус: 40 пикселей 20 пикселей;
}
Коробка представляет собой квадрат: дуга круга используется в качестве границы
  div {
  граница-верх-левый-радиус: 40%;
}
Поле не квадрат: дуга эллипса используется в качестве границы
  div {
  граница-верх-левый-радиус: 40%;
}
Цвет фона обрезается по границе
  div {
  граница-верх-левый-радиус: 40%;
  граница: двойной черный цвет 3px;
  цвет фона: rgb (250,20,70);
  фон-клип: контент-поле;
}

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

border-radius — CSS: Cascading Style Sheets

Свойство 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;
  
  border-radius: 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 | Codrops

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

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

Два значения border-top-left-radius: 55pt 25pt определяют кривизну угла.

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

Два равных радиуса приведут к круговой кривизне.

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

Два неравных радиуса приведут к эллиптической кривизне.

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

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

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

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

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

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

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

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

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

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

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

Значения

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

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

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

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

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

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

Примеры 

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

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

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

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

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

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: Закругленные углы:
Проект редакции

См. Также

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

Граница

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

Атрибуции

Как использовать свойство радиуса границы CSS3

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

 . Закругленные углы {
    радиус границы: 20 пикселей;
  }

  .круг {
    радиус границы: 50%;
  }

Примечание: Свойство border-radius фактически является сокращенным свойством для border-top-left-radius , border-top-right-radius , border-bottom-right -radius и border-bottom-left-radius свойства.

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

  .new-shape {
  радиус границы: 20 пикселей 50 пикселей 5 пикселей 0; / * вверху слева, вверху справа, внизу справа, внизу слева * /
}

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

  .leaf-shape {
  радиус границы: 0 50%;
}

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

  .odd-shape {
  радиус границы: 0 20 пикселей 50%;
}

Закругление угла не обязательно должно быть идеально симметричным. Вы можете указать как горизонтальный, так и вертикальный радиусы, используя косую черту («/»), чтобы получить угол эллиптической формы.

  .elliptical-1 {
  радиус границы: 50 пикселей / 10 пикселей; / * горизонтальный радиус / вертикальный радиус * /
}
.elliptical-2 {
  радиус границы: 10 пикселей / 50 пикселей;
}

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

  .elliptical-3 {
  радиус границы: 50 пикселей 20 пикселей 50 пикселей 20 пикселей / 20 пикселей 50 пикселей 20 пикселей 50 пикселей; / * горизонтальный верхний левый, горизонтальный верхний правый, горизонтальный нижний правый, горизонтальный нижний левый / вертикальный верхний левый, вертикальный верхний правый, вертикальный нижний правый, вертикальный нижний левый * /
}

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

  .elliptical-4 {
  граница-верх-левый-радиус: 50 пикселей 20 пикселей; / * горизонтальный радиус, вертикальный радиус * /
  граница-верх-правый-радиус: 20 пикселей 50 пикселей;
  граница-нижний-правый-радиус: 50 пикселей 20 пикселей;
  граница-нижний-левый-радиус: 20 пикселей 50 пикселей;
}

Дополнительная информация о свойстве CSS border radius:

CSS border-top-left-radius Свойство

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

Свойство border-top-left-radius является одним из свойств CSS3.

Есть три вида округления. Это может быть круг или эллипс или не использовать никакого значения, а угол квадратный. Если вы используете фоновое изображение или цвет, оно будет обрезано по границе. Процесс обрезки определяется значением свойства background-clip.

Свойство CSS border-top-left-radius определяется двумя значениями: длиной и процентом. Когда используется только одно значение, это значение определяет как горизонтальный, так и вертикальный радиусы эллипса.Если вы используете два значения, первое значение устанавливает горизонтальный радиус, а второе значение устанавливает вертикальный радиус. Проценты для горизонтального радиуса относятся к ширине коробки, проценты для вертикального радиуса относятся к высоте коробки. Отрицательные значения недопустимы.

Синтаксис¶ 

  border-top-left-radius: length | % | начальная | наследовать;

Вот пример border-top-left-radius, где используется только одно значение. Когда вы задаете только одно значение, это значение определяет как верхнюю, так и левую границу эллипса.

Пример свойства border-top-left-radius: ¶ 

  

  
     Название документа 
    <стиль>
      div {
        высота: 40 пикселей;
        фон: # 8ebf42;
        граница: 4px solid # 000000;
        граница-верх-левый-радиус: 25 пикселей;
      }
    
  
  
     
 Пример Border-top-left-radius.
Попробуйте сами »

Результат¶

В следующем примере первое значение предназначено для верхней границы, а второе — для левой границы.

Пример свойства border-top-left-radius с двумя значениями: ¶ 

  

  
     Название документа 
    <стиль>
      div {
        высота: 40 пикселей;
        фон: #ccc;
        граница: 4px solid # 000000;
        граница-верх-левый-радиус: 50 пикселей 25 пикселей;
      }
    
  
  
     
 Пример Border-top-left-radius.
Попробуйте сами »

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

Пример свойства border-top-left-radius со значением «%»: ¶ 

  

  
     Название документа 
    <стиль>
      div {
        высота: 40 пикселей;
        фон: #eee;
        граница: 4px solid # 000000;
        граница-верх-левый-радиус: 50% 60%;
      }
    
  
  
     
 Пример Border-top-left-radius.
Попробуйте сами »

Values¶


Border Radius — Tailwind CSS

round-none border-radius: 0px;
с закругленными углами радиус границы: 0,125 бэр;
закруглено радиус границы: 0,25 бэр;
закругленная радиус границы: 0,375 бэр;
округлый lg радиус границы: 0.5рем;
закругленный xl радиус границы: 0,75 бэр;
закругленное 2xl радиус границы: 1 rem;
закругленное 3xl радиус границы: 1,5 бэр;
с закругленными краями border-radius: 9999px;
закругленный-т-нет граница-верхний-левый-радиус: 0px; граница-верх-правый-радиус: 0 пикселей;
закругленный-r-none border-top-right-radius: 0px; граница-нижний-правый-радиус: 0 пикселей;
закругленный-b-none граница-нижний-правый-радиус: 0px; граница-нижний-левый-радиус: 0 пикселей;
закругленный-l-нет граница-верх-левый-радиус: 0 пикселей; граница-нижний-левый-радиус: 0 пикселей;
закругленный t-sm граница-верхний-левый-радиус: 0.125rem; граница-верх-правый-радиус: 0,125 бэр;
закругленный-r-sm граница-верх-правый-радиус: 0,125 бэр; граница-нижний-правый-радиус: 0,125 бэр;
закругленный-b-sm граница-нижний-правый-радиус: 0,125бэр; граница-нижний-левый-радиус: 0,125 бэр;
закругленный l-sm граница-верхний-левый-радиус: 0,125 бэр; граница-нижний-левый-радиус: 0,125 бэр;
закругленная граница-верх-левый-радиус: 0,25 бэр; граница-верх-правый-радиус: 0.25рем;
с закругленными углами граница, верхний правый радиус: 0,25 бэр; граница-нижний-правый-радиус: 0,25бэр;
закругленный-b граница-нижний-правый-радиус: 0,25бэр; граница-нижний-левый-радиус: 0,25 бэр;
закругленное l граница, верхний левый радиус: 0,25 бэр; граница-нижний-левый-радиус: 0,25 бэр;
закругленный t-md граница-верх-левый-радиус: 0,375 бэр; граница-верх-правый-радиус: 0,375 бэр;
закругленный-r-md граница-верх-правый-радиус: 0.375rem; граница-нижний-правый-радиус: 0,375 бэр;
закругленный-b-md граница-нижний-правый-радиус: 0,375 бэр; граница-нижний-левый-радиус: 0,375 бэр;
закругленный l-md граница-верх-левый-радиус: 0,375 бэр; граница-нижний-левый-радиус: 0,375 бэр;
закругленный t-lg граница-верх-левый-радиус: 0,5 бэр; граница-верх-правый-радиус: 0,5 бэр;
закругленный-r-lg граница-верх-правый-радиус: 0,5 бэр; граница-нижний-правый-радиус: 0.5рем;
закругленный-b-lg граница-нижний-правый-радиус: 0,5 бэр; граница-нижний-левый-радиус: 0,5 бэр;
закругленный l-lg граница-верх-левый-радиус: 0,5 бэр; граница-нижний-левый-радиус: 0,5 бэр;
закругленный-t-xl граница-верх-левый-радиус: 0,75 бэр; граница-верх-правый-радиус: 0,75 бэр;
закругленный-r-xl граница-верх-правый-радиус: 0,75 бэр; граница-нижний-правый-радиус: 0,75 rem;
закругленный-b-xl граница-нижний-правый-радиус: 0.75рем; граница-нижний-левый-радиус: 0,75 бэр;
закругленный-l-xl граница-верх-левый-радиус: 0,75 бэр; граница-нижний-левый-радиус: 0,75 бэр;
закругленная-t-2xl граница-верхний-левый-радиус: 1бэр; граница-верх-правый-радиус: 1 бэр;
закругленный-r-2xl граница-верх-правый-радиус: 1бэр; граница-нижний-правый-радиус: 1бэр;
закругленный-b-2xl граница-нижний-правый-радиус: 1бэр; граница-нижний-левый-радиус: 1бэр;
закругленный-l-2xl граница-верх-левый-радиус: 1бэр; граница-нижний-левый-радиус: 1бэр;
закругленная-t-3xl граница-верх-левый-радиус: 1.5рем; граница-верх-правый-радиус: 1,5 бэр;
закругленный-r-3xl граница-верх-правый-радиус: 1,5 бэр; граница-нижний-правый-радиус: 1,5 бэр;
закругленная-b-3xl граница-нижний-правый-радиус: 1,5 бэр; граница-нижний-левый-радиус: 1,5 бэр;
закругленный-l-3xl граница-верхний-левый-радиус: 1,5 бэр; граница-нижний-левый-радиус: 1,5 бэр;
закругленный-полный граница-верх-левый-радиус: 9999 пикселей; граница-верх-правый-радиус: 9999 пикселей;
закругленный-полный граница-верх-правый-радиус: 9999 пикселей; граница-нижний-правый-радиус: 9999 пикселей;
закругленный-полный граница-нижний-правый-радиус: 9999 пикселей; граница-нижний-левый-радиус: 9999 пикселей;
закругленный-l-полный border-top-left-radius: 9999px; граница-нижний-левый-радиус: 9999 пикселей;
Round-TL-none border-top-left-radius: 0px;
закругленный tr-none граница-верх-правый-радиус: 0px;
закругленный-br-none граница-нижний-правый-радиус: 0px;
закругленный-бл-нет граница-нижний-левый-радиус: 0px;
закругленный tl-sm граница-верхний-левый-радиус: 0.125rem;
закругленный tr-sm граница-верх-правый-радиус: 0,125 бэр;
закругленный-br-sm граница-нижний-правый-радиус: 0,125бэр;
закругленный-bl-sm граница-нижний-левый-радиус: 0,125бэр;
закругленный tl граница-верхний-левый-радиус: 0,25 бэр;
с закругленными углами граница, верхний правый радиус: 0,25 бэр;
закругленный-br граница-нижний-правый-радиус: 0.25рем;
с закругленными углами граница, нижний левый, радиус: 0,25 бэр;
Round-TL-MD border-top-left-radius: 0.375rem;
закругленный tr-md граница, верхний правый радиус: 0,375 бэр;
с закругленными углами граница, нижний правый радиус: 0,375 бэр;
закругленный-bl-md граница-нижний-левый-радиус: 0,375 бэр;
закругленный-tl-lg граница-верх-левый-радиус: 0.5рем;
закругленный tr-lg граница, верхний правый радиус: 0,5 бэр;
закругленный-br-lg граница-нижний-правый-радиус: 0,5 бэр;
закругленный-bl-lg граница-нижний-левый-радиус: 0,5 бэр;
Round-TL-XL border-top-left-radius: 0,75rem;
round-tr-xl border-top-right-radius: 0,75 rem;
закругленный-br-xl граница-нижний-правый-радиус: 0.75рем;
закругленный-bl-xl граница-нижний-левый-радиус: 0,75бэр;
закругленный-tl-2xl граница-верхний-левый-радиус: 1бэр;
закругленный tr-2xl граница-верх-правый-радиус: 1 rem;
закругленный-br-2xl граница-нижний-правый-радиус: 1бэр;
закругленный-bl-2xl граница-нижний-левый-радиус: 1бэр;
закругленный-tl-3xl граница-верх-левый-радиус: 1.

No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *