Граница - CSS-хитрости

borderСвойство является обобщающим синтаксис CSS , который принимает несколько значений для рисования линии вокруг элемента он применяется.

.box ( border: 3px solid red; height: 200px; width: 200px; )

Значения

borderСвойство принимает одно или более из следующих значений в комбинации:

border: || || 

• border-width: Определяет толщину границы.
  • : Числовое значение , измеренное в px, em, rem, vhи vwединицы.
  • thin: Эквивалент 1px
  • medium: Эквивалент 3px
  • thick: Эквивалент 5px
• border-style: Указывает тип линии, нарисованной вокруг элемента, включая:
  • solid: Сплошная непрерывная линия.
  • none (по умолчанию): линия не рисуется.
  • hidden: Линия нарисована, но не видна. это может быть удобно для добавления небольшой дополнительной ширины к элементу без отображения границы.
  • dashed: Линия, состоящая из тире.
  • dotted: Линия, состоящая из точек.
  • double: Две линии обведены вокруг элемента.
  • groove: Добавляет фаску на основе значения цвета таким образом, чтобы элемент казался вдавленным в документ.
  • ridge: Аналогично groove, но меняет значения цвета на противоположные таким образом, чтобы элемент выглядел поднятым.
  • inset: Добавляет разделенный тон к линии, из-за чего элемент выглядит слегка вдавленным.
  • outset: Аналогично inset, но меняет цвета местами таким образом, чтобы элемент казался слегка приподнятым.
• color: Определяет цвет границы и принимает ,, , , , , currentcolor and

Phew, that’s a lot of values for one little ol’ property! Here’s a demo that illustrates the differences between all of those style values:

See the Pen CSS border by Geoff Graham (@geoffgraham) on CodePen.

Browser Support

You can count on excellent support for the border property across all browsers.

Хром	Сафари	Fire Fox	Опера	IE	Android	iOS
Любой	Любой	Любой	3.5+	4+	Любой	Любой

Related Properties

What we covered here is specific to the border property, but there are other properties that provide even more options for styling borders.

• border-collapse: Specifies the spacing between borders on the
• border-image: Allows the use of an image to draw the border instead of a solid color.
• border-radius: Provides control for rounded corners.

More Information

• CSS Backgrounds and Borders Module Level 3 Specification
• Understanding border-image
• A Tale of Border Gradients

---




element. #####