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 Значение элемента наследуется от родительского элемента.

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

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

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

Что означает свойство 'border' в CSS?
Считаете ли это полезным?