Свойства 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

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

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

Значения:

• Length
• Thin
• Medium
• Thick

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