Рамки элемента в CSS: применение свойства Border

css

Содержание:



Свойство BORDER

Свойство Значения Пр* Нc*
border [ border-width; border-style; border-color ], inherit + -
border-width [ thin, medium, thick, ШИРИНА ]{1,4}, inherit + -
border-style [ none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset ]{1,4}, inherit + -
border-color [ ЦВЕТ, transparent ]{1,4}, inherit + -
border-bottom
border-left
border-right
border-top
[ border-width; border-style; border-color ], inherit + -
border-bottom-width
border-left-width
border-right-width
border-top-width
thin, medium, thick, ШИРИНА, inherit + -
border-bottom-style
border-left-style
border-right-style
border-top-style
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit + -
border-bottom-color
border-left-color
border-right-color
border-top-color
ЦВЕТ, transparent, inherit + -

Сокращенная форма задания отдельных свойств для определения ширины, стиля и цвета рамки элементов. При том, что значения этих свойств не являются обязательными, рамка будет отсутствовать, если не задано значение стиля рамки (оно по умолчанию: none).

Применение:

p { border: 5px groove #00ff00;} — для абзаца задана рамка: шириной 5px, стиль groove, цвета лайм:

рамки в css: применение свойства border

Border-width

Свойство задает ширину рамки элемента или отдельно для каждой её стороны, если стиль рамки отличен от none.

Значения:

Ширину можно указывать в разных единицах, удобнее в px. Одно значение задает ширину всей рамки. Два значения: 1-ое — для верхней и нижней рамок, 2-ое — для левой и правой. Три значения: 1-ое — для верхней, 2-ое — для левой и правой, 3-е — для нижней. Четыре значения установят ширину рамок в следующем порядке: верхняя, правая, нижняя, левая. Это — стандартный порядок в CSS.

thin — узкая.
medium — средняя.
thick — широкая.
inherit — наследование от родительского элемента.

Border-style

Свойство задает стиль рамки элемента или отдельно для каждой её стороны, его значение должно отличаться от none.

Значения:

none — нет, а ширина равна 0.
hidden — аналогично none, кроме применения к таблицам, где значение свойства Border-collapse равно collapse.
inherit — наследование от родительского элемента.

Допустимо использовать 1-4 значения — порядок применения, как для Border-width. Остальные значения лучше видны на картинке:

использование значений свойства border-style

Border-color

Свойство задает цвет рамки элемента, либо различные цвета для её четырех сторон. Значение стиля должно отличаться от none и hidden.

Значения:

Цвет
transparent — задает прозрачный цвет рамки.
inherit — наследование от родительского элемента.
Можно использовать 1-4 значения — порядок применения, как для Border-width.

Border-[bottom, left, right, top]

Свойства задают ширину, стиль и цвет рамки элементов для определенной стороны.
Значения: как для свойства Border.

Border-[bottom, left, right, top]-width

Свойства задают ширину рамки элемента для определенной стороны.
Значения: как для свойства Border-width.

Border-[bottom, left, right, top]-style

Свойства задают стиль рамки элемента для определенной стороны.
Значения: как для свойства Border-style.

Border-[bottom, left, right, top]-color

Свойства задают цвет рамки элемента для определенной стороны.
Значения: как для свойства Border-color.

Содержание: