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 способов:
<!-- Добавляем все границы и убираем 2 (левую и правую) -->
<div class="border border-left-0 border-right-0"></div>
<!-- Добавляем верхнюю и нижнюю границу -->
<div class="border-top border-bottom"></div>
Пример, как к элементу можно добавить только левую границу:
<!-- Добавляем границы с помощью класса border и убираем все кроме левой -->
<div class="border border-top-0 border-right-0 border-bottom-0"></div>
<!-- Устанавливаем границу с помощью border-left -->
<div class="border-left"></div>
Например, для того убрать все границы у элемента к нему необходимо добавить класс border-0
.
<!-- Удаляем все границы у элемента -->
<div class="border-0"></div>
Классы для изменения цвета границ
Для задания цвета границ, предназначены классы border-{theme}
. Вместо {theme}
необходимо указать название темы (primary
, secondary
, success
, danger
, warning
, info
, light
, dark
или white
).
Например, добавим к элементу границу справа и установим для неё тему success
.
<!-- 1 вариант -->
<div class="border-right border-success"></div>
<!-- 2 вариант -->
<div class="border border-top-0 border-bottom-0 border-left-0 border-success"></div>
Например, добавим к элементу границу снизу с темой danger
.
<!-- 1 вариант -->
<div class="border-bottom border-danger"></div>
<!-- 2 вариант -->
<div class="border border-top-0 border-left-0 border-right-0 border-danger"></div>
Скругление углов элемента
Во фреймворке Bootstrap 4 имеются классы, с помощью которых можно очень просто скруглять углы элементам. Одни классы (rounded
, rounded-circle
) выполняют это действие для всех углов, а другие (rounded-top
, rounded-right
, rounded-bottom
, rounded-left
) - только для определённых. Кроме этого, в Bootstrap 4 имеется класс (rounded-0
), который позволяет выполнить обратное действие, а именно убрать скругление углов.
Принцип действия этих классов основан на использовании CSS свойства border-radius
.
Например, создадим кнопку со скруглёнными углами:
<span class="py-2 px-3 bg-success text-white rounded mybtn">
Наведи на меня курсор
</span>

Например, сделаем изображение круглым (rounded-circle
):
<!-- Как сделать изображение круглым -->
<img src="elephant.jpg" alt="Круглое изображение..." class="img-fluid rounded-circle">
Пример, как можно сделать изображение со скруглёнными краями (rounded
) и скргулёнными только справа (rounded-right
):
<!-- Изображение со скруглёнными углами -->
<img src="elephant.jpg" alt="Круглое изображение..." class="img-fluid rounded">
<!-- Изображение, имеющее скругленные углы только справа -->
<img src="elephant.jpg" alt="Круглое изображение..." class="img-fluid rounded">
