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">