CSS свойство border

❮ Назад Вперед ❯

CSS свойство border - сокращенное свойство для установления значений свойств border-width, border-style и border-color для всех четырех сторон элемента. Отрицательные значения недопустимы.

Сокращенное свойство border можно использовать, если хотите, чтобы все четыре стороны был одинаковыми. Можно изменить границы с помощью свойств border-width, border-style и border-color, которые могут задать разные значения для каждой из сторон.

Если значение не установлено, границы будут прозрачными.

Значение по умолчанию	medium none currentColor
Применяется	Ко всем элементам, а также к ::first-letter .
Наследуется	Нет
Анимируемое	Да. Толщина, цвет и стиль границ анимируемы.
Версия	CSS1
DOM синтаксис	object.style.border = "5px solid green";

Синтаксис

border: border-width border-style border-color | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      border: thick solid #8ebf42;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства border</h2>
    <p>Для границы этого параграфа установлено "thick solid green".</p>
  </body>
</html>

Попробуйте сами!

Пример, где установлено значение dashed для стиля границы, толщина установлена 3px, а цвет границы синий.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      border: 3px dashed #1c87c9;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства border</h2>
    <p>Для границы параграфа установлено "3px dashed blue".</p>
  </body>
</html>

Попробуйте сами!

Рассмотрим другой пример с border-color, где применены 3 значения. Первое применено для верхней границы, второе - для правой и левой, а третье - для нижней границы.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      border: 3px solid;
      border-color: #1c87c9 #666 #8ebf42;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства border</h2>
    <div>Здесь применены 3 значения к свойству border-color.</div>
  </body>
</html>

Попробуйте сами!

Пример, где также применены три значения:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p, div {
      padding: 5px;
      }
      .border1 {
      border: 5px solid #ccc;
      }
      .border2 {
      border: 5px dotted #1c87c9;
      }
      div {
      border: thick double #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства border</h2>
    <p class="border1">Заголовок с границей solid gray.</p>
    <p class="border2">Заголовок с границей dotted blue.</p>
    <div> div элемент с границей thick double green.</div>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
border-width	Устанавливает толщину границы. Значение умолчанию - "medium"
border-style	Устанавливает стиль границы. Значение умолчанию - "none".
border-color	Устанавливает цвет границы. Значение умолчанию - текущий цвет элемента.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.


1.0+	1.0+	1.0+	3.5+

1.0+

3.5+

CSS свойство border

Синтаксис

Пример

Пример

Пример

Пример

Значения

Поддержка браузера

Практикуйте свои знания