Как округлить границы в css
Перейти к содержимому

Как округлить границы в css

  • автор:

Bootstrap 4 — Управление границами и скруглениями углов элементов

Bootstrap 4 - Управление границами и скруглениями углов элементов

Для управления границами элемента предназначены классы border , border-0 , border-top , border-right , border-bottom , border-left , border-top-0 , border-right-0 , border-bottom-0 и border-left-0 .

Класс border устанавливает границы для всех сторон элемента. Классы border-top , border-right , border-bottom и border-left выполняет это действие только для одной из них. А именно класс border-top устанавливает верхнюю границу, border-right – правую, border-bottom – нижнюю, а border-left – левую. Другая часть классов ( border-top-0 , border-right-0 , border-bottom-0 и border-left-0 ) выполняет обратное действие, а именно убирает одну из границ ( border-top-0 – верхнюю, border-right-0 – правую, border-bottom-0 – нижнюю, border-left-0 – левую). Последний класс из этой группы ( border-0 ) предназначен для убирания у элемента всех границ.

Например, для установления верхней и нижней границы HTML элементу можно воспользоваться одним из следующих 2 способов:

Пример, как к элементу можно добавить только левую границу:

Например, для того убрать все границы у элемента к нему необходимо добавить класс border-0 .

Классы для изменения цвета границ

Для задания цвета границ, предназначены классы border-{theme} . Вместо {theme} необходимо указать название темы ( primary , secondary , success , danger , warning , info , light , dark или white ).

Например, добавим к элементу границу справа и установим для неё тему success .

Например, добавим к элементу границу снизу с темой danger .

Скругление углов элемента

Во фреймворке Bootstrap 4 имеются классы, с помощью которых можно очень просто скруглять углы элементам. Одни классы ( rounded , rounded-circle ) выполняют это действие для всех углов, а другие ( rounded-top , rounded-right , rounded-bottom , rounded-left ) — только для определённых. Кроме этого, в Bootstrap 4 имеется класс ( rounded-0 ), который позволяет выполнить обратное действие, а именно убрать скругление углов.

Принцип действия этих классов основан на использовании CSS свойства border-radius .

Например, создадим кнопку со скруглёнными углами:

 Наведи на меня курсор 

Bootstrap 4 - Кнопка со скруглёнными углами

Например, сделаем изображение круглым ( rounded-circle ):

Пример, как можно сделать изображение со скруглёнными краями ( rounded ) и скргулёнными только справа ( rounded-right ):

Круглое изображение.

Границы

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

На этой странице

Граница

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

Добавка

span class="border">span> span class="border-top">span> span class="border-end">span> span class="border-bottom">span> span class="border-start">span>

Вычитание

span class="border-0">span> span class="border-top-0">span> span class="border-end-0">span> span class="border-bottom-0">span> span class="border-start-0">span>

Цвет границы

Измените цвет границы с помощью утилит, созданных на основе цветов нашей темы.

span class="border border-primary">span> span class="border border-secondary">span> span class="border border-success">span> span class="border border-danger">span> span class="border border-warning">span> span class="border border-info">span> span class="border border-light">span> span class="border border-dark">span> span class="border border-white">span>

Ширина границы

span class="border border-1">span> span class="border border-2">span> span class="border border-3">span> span class="border border-4">span> span class="border border-5">span>

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

Добавьте классы к элементу, чтобы легко скруглить его углы.

Пример закругленного изображения

Пример закругленного изображения сверху

Пример закругленного изображения справа

Пример закругленного изображения снизу

Пример закругленного изображения слева

Полностью круглое изображение

Закругленное изображение таблетки

img src=". " class="rounded" alt=". "> img src=". " class="rounded-top" alt=". "> img src=". " class="rounded-end" alt=". "> img src=". " class="rounded-bottom" alt=". "> img src=". " class="rounded-start" alt=". "> img src=". " class="rounded-circle" alt=". "> img src=". " class="rounded-pill" alt=". ">

Размеры

Используйте классы масштабирования для больших или меньших закругленных углов. Размеры варьируются от 0 до 3 и могут быть настроены путем изменения API утилит.

Пример изображения без закруглений

Пример маленького закругленного изображения

Пример закругленного изображения по умолчанию

Пример большого закругленного изображения

img src=". " class="rounded-0" alt=". "> img src=". " class="rounded-1" alt=". "> img src=". " class="rounded-2" alt=". "> img src=". " class="rounded-3" alt=". ">

Sass

Переменные

$border-width: 1px; $border-widths: ( 1: 1px, 2: 2px, 3: 3px, 4: 4px, 5: 5px ); $border-color: $gray-300; 
$border-radius: .25rem; $border-radius-sm: .2rem; $border-radius-lg: .3rem; $border-radius-pill: 50rem; 

Миксины

@mixin border-radius($radius: $border-radius, $fallback-border-radius: false)  @if $enable-rounded  border-radius: valid-radius($radius); > @else if $fallback-border-radius != false  border-radius: $fallback-border-radius; > > @mixin border-top-radius($radius: $border-radius)  @if $enable-rounded  border-top-left-radius: valid-radius($radius); border-top-right-radius: valid-radius($radius); > > @mixin border-end-radius($radius: $border-radius)  @if $enable-rounded  border-top-right-radius: valid-radius($radius); border-bottom-right-radius: valid-radius($radius); > > @mixin border-bottom-radius($radius: $border-radius)  @if $enable-rounded  border-bottom-right-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius); > > @mixin border-start-radius($radius: $border-radius)  @if $enable-rounded  border-top-left-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius); > > @mixin border-top-start-radius($radius: $border-radius)  @if $enable-rounded  border-top-left-radius: valid-radius($radius); > > @mixin border-top-end-radius($radius: $border-radius)  @if $enable-rounded  border-top-right-radius: valid-radius($radius); > > @mixin border-bottom-end-radius($radius: $border-radius)  @if $enable-rounded  border-bottom-right-radius: valid-radius($radius); > > @mixin border-bottom-start-radius($radius: $border-radius)  @if $enable-rounded  border-bottom-left-radius: valid-radius($radius); > > 

API утилит

Пограничные утилиты объявлены в нашем API утилит в scss/_utilities.scss . Узнайте, как использовать API утилит.

 "border": ( property: border, values: ( null: $border-width solid $border-color, 0: 0, ) ), "border-top": ( property: border-top, values: ( null: $border-width solid $border-color, 0: 0, ) ), "border-end": ( property: border-right, class: border-end, values: ( null: $border-width solid $border-color, 0: 0, ) ), "border-bottom": ( property: border-bottom, values: ( null: $border-width solid $border-color, 0: 0, ) ), "border-start": ( property: border-left, class: border-start, values: ( null: $border-width solid $border-color, 0: 0, ) ), "border-color": ( property: border-color, class: border, values: map-merge($theme-colors, ("white": $white)) ), "border-width": ( property: border-width, class: border, values: $border-widths ), 
 "rounded": ( property: border-radius, class: rounded, values: ( null: $border-radius, 0: 0, 1: $border-radius-sm, 2: $border-radius, 3: $border-radius-lg, circle: 50%, pill: $border-radius-pill ) ), "rounded-top": ( property: border-top-left-radius border-top-right-radius, class: rounded-top, values: (null: $border-radius) ), "rounded-end": ( property: border-top-right-radius border-bottom-right-radius, class: rounded-end, values: (null: $border-radius) ), "rounded-bottom": ( property: border-bottom-right-radius border-bottom-left-radius, class: rounded-bottom, values: (null: $border-radius) ), "rounded-start": ( property: border-bottom-left-radius border-top-left-radius, class: rounded-start, values: (null: $border-radius) ), 
  • Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
  • Код под лицензией MIT, документация CC BY 3.0.
  • Текущая версия v5.0.2.

Как округлить границы в css

Граница отделяется элемент от внешнего по отношению к нему содержимого. При этом граница является частью элемента.

Для настройки границы могут использоваться сразу несколько свойств:

  • border-width : устанавливает ширину границы
  • border-style : задает стиль линии границы
  • border-color : устанавливает цвет границы

Свойство border-width может принимать следующие типы значений:

    Значения в единицах измерения, таких как em, px или cm

border-width: 2px;
border-width: medium;

Свойство border-color в качестве значения принимает цвет CSS:

border-color: red;

Свойство border-style оформляет тип линии границы и может принимать одно из следующих значений:

border-style в CSS 3

  • none : граница отсутствует
  • solid : граница в виде обычной линии
  • dashed : штриховая линия
  • dotted : линия в виде последовательности точек
  • double : граница в виде двух параллельных линий
  • groove : граница имеет трехмерный эффект
  • inset : граница как бы вдавливается во внутрь
  • outset : аналогично inset, только граница как бы выступает наружу
  • ridge : граница также реализует трехмерный эффект
    Блочная модель в CSS3 div  

Граница в CSS 3

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

/* для верхней границы */ border-top-width border-top-style border-top-color /* для нижней границы */ border-bottom-width border-bottom-style border-bottom-color /* для левой границы */ border-left-width border-left-style border-left-color /* для правой границы */ border-right-width border-right-style border-right-color

Свойство border

Вместо установки по отдельности цвета, стиля и ширины границы мы можем использовать одно свойство — border :

border: ширина стиль цвет
border: 2px solid red;

Для установки границы для отдельных сторон можно использовать одно из свойств:

border-top border-bottom border-left border-right

Их использование аналогично:

border-top: 2px solid red;

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

Свойство border-radius позволяет округлить границу. Это свойство принимает значение радиуса в пикселях или единицах em.

    Блочная модель в CSS3 div  

Теперь каждый угол будет скругляться по радиусу в 30 пикселей:

border-radius в CSS 3

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

border-radius: 15px 30px 5px 40px;

скругление углов в CSS 3

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

border-top-left-radius: 15px; /* радиус для верхнего левого угла */ border-top-right-radius: 30px; /* радиус для верхнего правого угла */ border-bottom-right-radius: 5px; /* радиус для нижнего левого угла */ border-bottom-left-radius: 40px; /* радиус для нижнего правого угла */

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

border-radius: 40px/20px;

В данном случае полагается, что радиус по оси X будет иметь значение 40 пикселей, а по оси Y — 20 пикселей.

border-radius¶

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

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

Демо¶

  • 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-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • 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-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • box-shadow

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
/* 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 показана разница между обычным скруглённым уголком и эллиптическим уголком.

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

border-radius: 0; 

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

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

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

Can I Use border-radius? Data on support for the border-radius feature across the major browsers from caniuse.com.

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
 html> head> meta charset="utf-8" /> title>border-radiustitle> style> .radius  background: #f0f0f0; /* Цвет фона */ border: 1px solid black; /* Параметры рамки */ padding: 15px; /* Поля вокруг текста */ margin-bottom: 10px; /* Отступ снизу */ > style> head> body> div style="border-radius: 50px 0 0 50px;" class="radius" > border-radius: 50px 0 0 50px; div> div style="border-radius: 40px 10px" class="radius"> border-radius: 40px 10px; div> div style="border-radius: 10em/1em;" class="radius"> border-radius: 13em/3em; div> div style="border-radius: 13em 0.5em/1em 0.5em;" class="radius" > border-radius: 13em 0.5em/1em 0.5em; div> div style="border-radius: 8px;" class="radius"> border-radius: 8px; div> body> html> 

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

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