`border`

Время чтения: меньше 5 мин

Кратко

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

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

Пример

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

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

Зададим рамку толщиной 5 пикселей, сплошную, цвета #ED6742:

        
          
          .element {  border: 5px solid #ed6742;}
          .element {
  border: 5px solid #ed6742;
}

Открыть демо в новой вкладке

Как пишется

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

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

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

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

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

`border-width`

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

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

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

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

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

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

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

`border-style`

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

Доступные значения описаны в статье border-style.

`border-color`

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

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

Подсказки

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

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

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

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

На практике

Алёна Батицкая

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

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

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

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

Наглядно видно наложение рамок на этой картинке:

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

Открыть демо в новой вкладке

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

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

        
          
          .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  );}
          .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! Вы прекрасны 😄