CSS Граница

CSS Граница — это свойство, используемое для определения стиля границы элемента.

Границы можно применять к любому HTML-элементу, чтобы улучшить визуальные эффекты, разделить содержимое или выделить элементы.

Свойства границ CSS в основном включают ширину границы, стиль границы, цвет границы и сокращенные свойства.

Свойства границ CSS

Свойства границ CSS позволяют указать стиль и цвет границы элемента.

Стиль границы

Свойство border-style задаёт, какой тип границы отображать.

border-styleСвойство используется для указания типа отображаемой границы.

Допустимые значения следующие:

• dotted: Определяет точечную границу.
• dashed: Определяет пунктирную границу.
• solid: Определяет сплошную границу.
• double: Определяет двойную границу.
• groove: Определяет объёмную желобчатую границу. Эффект зависит от значения border-color.
• ridge: Определяет 3D гребенчатую границу. Эффект зависит от значения border-color.
• inset: Определяет 3D вдавленную границу. Эффект зависит от значения border-color.
• outset: Определяет 3D выпуклую границу. Эффект зависит от значения border-color.
• none: Не задает границу.
• hidden: Определяет скрытую границу.

демонстрация border-style:

none: По умолчанию граница отсутствует

dotted: Определяет точечную границу

dashed: Определяет штриховую границу

solid: Определяет сплошную границу

double: Определяет две границы. Ширина двух границ такая же, как значение border-width

groove: Определяет 3D желобчатую границу. Эффект зависит от значения цвета границы

ridge: Определяет 3D-рельефную границу. Эффект зависит от значения цвета границы.

inset: Определяет 3D-встроенную границу. Эффект зависит от значения цвета границы.

outset: Определяет 3D-выпуклую границу. Эффект зависит от значения цвета границы.

Попробуйте сами »

Ширина границы

Вы можете задать ширину границы с помощью свойства border-width.

Существует два способа задать ширину границы: можно указать значение длины, например 2px или 0.1em (с такими единицами, как px, pt, cm, em и т. д.), или использовать одно из 3 ключевых слов: thick, medium (значение по умолчанию) и thin.

Примечание:CSS не определяет конкретные значения ширины для этих 3 ключевых слов, поэтому один пользователь может задать thick, medium и thin как 5px, 3px и 2px соответственно, а другой — как 3px, 2px и 1px соответственно.

Цвет границы

Свойство border-color используется для установки цвета границы. Цвета, которые можно задать:

• название — задаёт название цвета, например "red"
• RGB - укажите значения RGB, например "rgb(255,0,0)"
• Hex - задаёт шестнадцатеричное значение, например "#ff0000"

Вы также можете задать цвет границы как "transparent".

Примечание:сам по себе border-color не даёт эффекта; сначала нужно использовать border-style, чтобы задать стиль границы.

Границы - настройка каждой стороны отдельно

В CSS можно задать разные границы для разных сторон:

Приведённый выше пример также можно задать с помощью одного свойства:

Свойство border-style может иметь 1-4 значений:

• border-style:dotted solid double dashed;
  • Верхняя граница точечная
  • Правая граница сплошная
  • Нижняя граница двойная
  • Левая граница пунктирная
  
  
• border-style:dotted solid double;
  • Верхняя граница точечная
  • Левая и правая границы сплошные
  • Нижняя граница двойная
  
  
• border-style:dotted solid;
  • Верхняя и нижняя границы точечные
  • Правая и левая границы сплошные
  
  
• border-style:dotted;
  • Все четыре границы точечные

В приведённом выше примере используется border-style. Однако его также можно использовать вместе с border-width и border-color.

Сокращённое свойство border

В приведённом выше примере для установки границы использовалось много свойств.

Вы также можете задать границу одним свойством.

В свойстве "border" можно задать следующее:

• border-width
• border-style (обязательно)
• border-color

Другие примеры

Все свойства границы в одном объявлении
В этом примере показано использование сокращённого свойства для установки всех четырёх свойств border в одном объявлении.

Задайте стиль нижней границы
В этом примере показано, как задать стиль нижней границы.

Задайте ширину левой границы
В этом примере показано, как задать ширину левой границы.

Задайте цвет четырёх границ
В этом примере показано, как задать цвет четырёх границ. Можно задать от одного до четырёх цветов.

Задайте цвет правой границы
В этом примере показано, как задать цвет правой границы.

Задайте градиентную границу
В этом примере показано, как задать градиентные границы.

Свойства границ CSS