логотип PurpleSchool

Семейство свойств 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;

Основы JavaScript

Антон Ларичев
иконка часов18 часов лекций
иконка зведочки рейтинга4.9
Frontend
Backend
Основы JavaScript
1 890 ₽