border CSS

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.

Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.

Значение по умолчанию:

Зависит от использования

Наследуется:
Нет
Применяется:

Ко всем элементам

Анимируется:
Да
Объект JavaScript:

object.style.border

Спецификации:

Синтаксис

border: 1px;
border: 2px dotted;
border: medium dashed green;

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок
Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Примеры

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border</title>
  <style>
   .brd {
    border: 4px double black; /* Параметры границы */
    background: #fc3; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <div class="brd">
   Познание текста, не учитывая количества слогов, стоящих между 
   ударениями, дает ямб. Эти слова  совершенно справедливы, 
   однако генеративная поэтика аннигилирует урбанистический скрытый смысл.
   </div>
 </body>
</html>

В данном примере вокруг блока добавляется двойная граница.