Свойства CSS-рамок

2008-03-06 / Рубрика: CSS

Перевод с английского языка небольшого параграфа про CSS-рамки.

Рамка

Вы можете установить цвет, стиль и толщину рамки вокруг элемента с помощью одного свойства.

border: 1px solid #333333;

Также можно устанавливать свойства рамки только с одной стороны:

border-top: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;

Значения:

  • цвет
  • стиль
  • толщина

Также можно установить каждое свойство по-отдельности.

Цвет рамки

Вы можете установить отдельно цвет рамки.

border-color: значение;
border-top-color: значение;
border-right-color: значение;
border-bottom-color: значение;
border-left-color: значение;

Значения:

  • имя цвета
  • шестнадцатиричный код
  • RGB-код
  • transparent (прозрачный)

Стиль Рамки

Можно отдельно установить стиль рамки.

border-style: значение;
border-top-style: значение;
border-right-style: значение;
border-bottom-style: значение;
border-left-style: значение;

Значения:

  • dashed
  • dotted
  • double
  • groove
  • hidden
  • inset
  • none
  • outset
  • ridge
  • solid

Толщина рамки

Можно отдельно установить толщину рамки.

border-width: значение;

Значения:

  • Length
  • Thin
  • Medium
  • Thick

У любого блока есть четыре стороны: верхняя, правая, нижняя и левая. Для каждой из этих сторон можно задавать свои цвет, толщину и стиль рамки.

Автор — cssbasics.com

Перевод — Полухин Владимир