Семейство свойств Border

Cвойство border-style

Определяет внешний вид границы, выбирая из ряда предварительно заданных стилей. Может принимать одно или несколько значений, разделенных пробелами.

Синтаксис

border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

/* верхняя и нижняя граница рамки | левая, правая граница */
border-color: dashed solid;

/* вверхня граница рамки | левая, правая граница | нижняя граница */
border-color: inset outset inset;

/* вверх | право | низ | лево */
border-color: dashed inset inset outset;

border-color: inherit;
border-color: initial;

Значения

• none(значение по умолчанию): рамка не отображается.
• hidden: Эквивалентно none.
• dotted: рамка представляет собой серию точек
• dashed: рамка представляет собой серию тире
• solid: рамка представляет собой сплошную линию
• double: рамка представляет собой двойную линию
• groove: рамка выглядит как желобок или углубление
• ridge: рамка выглядит как гребень или выступ
• inset: рамка выглядит как вставка
• outset: рамка выглядит как начало
• initial: Устанавливает значение свойства в значение по умолчанию.
• inherit: Наследует значение свойства от родительского элемента.

Cвойство border-color

Определяет цвет границы путем выбора из ряда цветовых значений, включая именованные цвета, шестнадцатеричные цветовые коды, значения функций RGB и HSL.

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

Синтаксис

border-color: hotpink;

/* верхняя и нижняя граница рамки | левая, правая граница */
border-color: smoke #f015ca;

/* вверхня граница рамки | левая, правая граница | нижняя граница */
border-color: #fff turquoise #f015ca;

/* вверх| право | низ | лево */
border-color: currentColor #d13941 transparent lch(29.2345% 44.2 27);

border-color: inherit;
border-color: initial;

Значения

• transparent: Устанавливает прозрачный цвет для рамки. Ширина рамки при этом не меняется. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента.

• цвет: задается словом или формулой.

• initial: Устанавливает значение свойства в значение по умолчанию.

• inherit: Наследует значение свойства от родительского элемента.

Cвойство border-width

Определяет ширину границы, выбирая из ряда значений, включая пиксели, em, rem, проценты и другие единицы CSS.

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

Синтаксис

border-width: thin;
border-width: medium;
border-width: thick;

border-width: 1.2rem;

/* верхняя и нижняя граница рамки | левая, правая граница */
border-width: 2px 1.5em;

/* вверхня граница рамки | левая, правая граница | нижняя граница */
border-width: 1px 2em 1.5cm;

border-width: inherit;
border-width: initial;

Значения

• thin / medium / thick: Ключевые слова, устанавливают ширину рамки относительно друг друга. Первое значение уже, чем второе, второе — тоньше третьего. Значение по умолчанию — medium

• фиксированная длина: (px, em)

• initial: Устанавливает значение свойства в значение по умолчанию.

• inherit: Наследует значение свойства от родительского элемента.

Cвойство border

Используется для сокращенный записи трех свойств: border-width, border-style, border-color.

Синтаксис

border: purple;
border: 0.75vh dotted;
border: dashed #f39b9f91;
border: medium dashed rgb(0, 255, 234);
border: revert-layer;
border: inherit;
border: initial;