border

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

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

Фон

Синтаксис

/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: outset #f33;

/* width | style | color */
border: medium dashed green;

/* Global values */
border: inherit;
border: initial;
border: unset;

Значения

  • dotted - определяет пунктирную границу.
  • A dotted border.

  • dashed - определяет штриховую границу.
  • A dashed border.

  • solid - определяет сплошную границу.
  • A solid border.

  • double - определяет двойную границу.
  • A double border.

  • groove - определяет трехмерную рифленую границу. Эффект зависит от значения цвета границы.
  • A groove border. The effect depends on the border-color value.

  • ridge - определяет трехмерную гребенчатую границу. Эффект зависит от значения цвета границы.
  • A ridge border. The effect depends on the border-color value.

  • inset - определяет границу трехмерной вставки. Эффект зависит от значения цвета границы.
  • An inset border. The effect depends on the border-color value.

  • outset - определяет трехмерную границу начала. Эффект зависит от значения цвета границы.
  • An outset border. The effect depends on the border-color value.

  • none - не определяет границы.
  • No border.

  • hidden - определяет скрытую границу.
  • A hidden border.

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

Описание и примеры

<!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>

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