① Стиль рамки border-style

CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его поля padding. Рамка задаётся с помощью краткого свойства border. Стиль рамки задается с помощью трех свойств: стиль, цвет и ширина.

Содержание:

1. Стиль рамки border-style

2. Цвет рамки border-color

3. Ширина рамки border-width

4. Задание рамки одним свойством и для одной границы элемента

📷 CSS - рамка

По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.

border-style (border-top-style, border-right-style, border-bottom-style, border-left-style)

Значения:

none - Значение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства.
hidden - Эквивалентно none.
dotted - ↓

dashed - ↓

solid - ↓

double - ↓

groove - ↓

ridge - ↓

inset - ↓

outset - ↓

{1,4} - ↓

initial - Устанавливает значение свойства в значение по умолчанию.
inherit - Наследует значение свойства от родительского элемента.

Синтаксис

CSS

p {border-style: solid;}
p {border-top-style: solid;}

Продолжение в следующей статье!