skip to main content

border

css

Кратко 🔗

Свойство border отвечает за отрисовку видимой границы блока. Часто видимую границу блока называют рамкой.

Само свойство border является шорткатом (короткой записью) и объединяет в себе значение для нескольких полных свойств:

selector {
border: [border-width] [border-style] [border-color];
}

Пример 🔗

Украсим текстовую карточку цветной сплошной рамкой.

HTML

<div class="element">
<p>Повседневная практика показывает, ...</p>
</div>

CSS

.element {
border: 5px solid #ed6742; /* рамка толщиной 5 пикселей, сплошная, цвет #ED6742 */
}

Как это понять 🔗

Слово border переводится с английского как граница, бордюр, рамка.

🤖 Значения можно писать в любом порядке, интерпретатор браузера разберётся. Главное разделять их пробелами. Но общепринятым является именно такой порядок.

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

  • border-top — рамка верхней границы.
  • border-right — рамка правой границы.
  • border-bottom — рамка нижней границы.
  • border-left — рамка левой границы.

Все четыре рамки могут быть разными по толщине, цвету и стилю.

Как пишется 🔗

Рассмотрим каждое из значений свойства border отдельно.

border-width 🔗

В классической записи свойства border значение, отвечающее за ширину рамки, идёт первым.

Значением может быть число с любыми единицами измерения, доступными в вебе, кроме процентов. Причиной тому отсутствие отправной точки для расчётов ширины рамки в процентах. От чего считать 1%? 🤔

К единому мнению не пришли. И потому рамка, ширина которой указана в процентах, просто не будет отображаться.

Есть ещё ключевые слова для указания ширины:

  • thin — 2 пикселя;
  • medium — 4 пикселя;
  • thick — 6 пикселей.

Но значение этих ключевых слов может отличаться в разных браузерах. Поэтому они нечасто используются в практике.

selector {
border: 1rem solid red; /* Рамка шириной 1rem */
border: 10px solid red; /* Рамка шириной 10 пикселей */
border: 5vw solid red; /* Рамка шириной 5vw */
}

border-style 🔗

В классической записи свойства border значение, отвечающее за стиль рамки, идёт вторым.

Стиль рамки задаётся при помощи ключевых слов:

  • dotted — рамка состоит из точек с пробелами между ними.
  • dashed — рамка состоит из коротких чёрточек с пробелами между ними.
  • solid — сплошная рамка. Этот стиль используется чаще всего.
  • double — рамка состоит из двух сплошных линий с небольшим нерегулируемым отступом между ними. Если рамка тонкая, например, 1 пиксель, то внешне это значение почти не будет отличаться от solid. Для визуальной разницы задавай рамку большей ширины.

Ниже будут перечислены редко используемые стили рамки:

  • groove — рамка объёмная, с тенями от источника света, находящегося в верхнем левом наружном углу.
  • ridge — рамка объёмная, с тенями от источника света, находящегося в нижнем правом внешнем углу.
  • inset — рамка с тенями от источника света, находящегося в нижнем правом внутреннем углу.
  • outset — рамка с тенями от источника света, находящегося в левом верхнем внутреннем углу.

Понять текстовое описание этих стилей довольно сложно, посмотри пример ниже:

border-color 🔗

В классической записи значение, отвечающее за цвет, идёт последним.

Цвет может быть задан в любых доступных в вебе значениях: HEX, rgb(), rgba(), ключевыми словами.

Подсказки 🔗

💡 Свойство border будет работать даже при такой записи: border: solid. Для того, чтобы рамка отобразилась достаточно указать стиль. Остальные значения будут дописаны по умолчанию: ширина рамки будет равна 3 пикселям, а цвет будет чёрным.

💡 Свойство не наследуется.

💡 Появление / исчезновение рамки можно анимировать при помощи свойства transition 🥳

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

В работе 🔗

Алёна,

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

HTML

<div class="top"></div>

CSS

.top {
width: 0;
height: 0;
border-left: 50px solid transparent; /* прозрачная рамка слева, ширина х */
border-right: 50px solid transparent; /* прозрачная рамка справа, ширина х */
border-bottom: 100px solid red; /* цветная рамка снизу, ширина х * 2 */
}

Такое поведение достигается из-за того, что прозрачные рамки перекрывают часть цветной рамки.

Наглядно видно наложение рамок на следующей картинке:

Внешний вид наложения рамок

В итоге можно создать треугольники, смотрящие в любую сторону. Этот приём можно использовать чтобы не тянуть в проект мелкие иконки треугольников или стрелок.

🛠 Ещё немного про треугольники. А точнее стрелки. Их тоже можно создать при помощи border, но тут понадобиться подключить свойство transform (transform), чтобы повернуть элемент с рамками на 45 градусов в нужную сторону:

HTML

<div class="arrows">
<div class="arrow _prev"></div>
<div class="arrow _next"></div>
</div>

CSS

.arrows {
max-width: 1200px;
height: 250px;
margin: 0 auto;
background-color: #f1f1f1;
}

.arrow {
/* Рисуем квадрат */
width: 50px;
height: 50px;

border-left: 5px solid #ff0001; /* Задаём левую рамку */
border-bottom: 5px solid #ff0001; /* Задаём нижнюю рамку */
}

.arrow._prev {
transform: rotate(45deg); /* Поворачиваем квадрат нижним левым углом влево */
}

.arrow._next {
transform: rotate(
-135deg
); /* Поворачиваем квадрат нижним левым углом вправо */
}

Чем не стрелки для слайдера? 🤗

🛠 Часто встречающийся дизайнерский приём — появление рамки вокруг элемента при наведении на него курсора мыши.

Если просто добавлять рамку для селектора :hover, то элемент будет дёргаться. Причина в том, что размер элемента увеличивается на ширину рамки. Чтобы подобных подёргиваний не происходило, изначально задай рамку нужной толщины, но задай для неё прозрачный цвет (transparent). А по наведению курсора просто меняй цвет на нужны. Profit! Вы прекрасны 😄

Автор: Алёна,