Рамка CSS

Свойства рамки CSS

CSS border Свойство позволяет определить стиль, ширину и цвет рамки элемента.

Все мои рамки имеют рамку.

У меня есть нижняя рамка красного цвета.

У меня есть рамка с закругленными углами.

У меня есть левая рамка синего цвета.

Стиль рамки CSS

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

Разрешены следующие значения:

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

border-style Свойство может устанавливать от одного до четырех значений (для верхней рамки, правой рамки, нижней рамки и левой рамки).

Пример

Показ различных стилей рамки:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Результат:

Точечные линии границы.

Прерывистые линии границы.

Прямые линии границы.

Двойные линии границы.

Вогнутые границы. Эффект зависит от значения border-color.

Граничные полосы. Эффект зависит от значения border-color.

3D inset границы. Эффект зависит от значения border-color.

3D outset границы. Эффект зависит от значения border-color.

Без границ.

Скрытые границы.

Смешанные границы.

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

Внимание:Если не установлено border-style Свойства, если не установлены другие CSS-границы (подробнее будет рассказано в следующей главе), не будут иметь никакого эффекта!