Свойство BORDER в CSS



Свойство border задает границу вокруг блока. Границы border можно задавать отдельно для каждой стороны. Для этого после border нужно добавить один из параметров top, right, bottom, left.

  • border-top - верхняя граница.
  • border-right - правая граница.
  • border-bottom - нижняя граница.
  • border-left - левая граница

Также каждый элемент border может иметь свой цвет, толщину, тип линии. Для этого к border через дефис добавляют ключевые слова : color (для цвета), width (для толщины) и style (для типа линии). если для четырех границ заданы одинаковые значения используют краткую запись:


  • border-color - цвет всех границ
  • border-width - толщина всех границ.
  • border-style - стиль всех границ.

Свойство color может обозначаться шестнадцатеричным кодом цветов (типа #26FF15), именными цветами (red, blue и т.д.), десятичными кодами в модели RGB (типа rgb(255, 0, 0)).

Для свойства width применяют ключевые слова thin (тонкая граница), medium (средняя граница) и thick (толстая граница). Единица измерения любая.

Для свойства style применяют следующие ключевые слова:


  • none - граница отсутствует.
  • dotted - рамка из точек.
  • dashed - пунктирная линия.
  • solid - сплошная линия.
  • double - двойная сплошная линия.
  • groove - вдавленная линия с имитацией объема.
  • ridge - выпуклая объемная линия.
  • inset - весь блок выглядит вдавленным.
  • outset -весь блок выглядит выпуклым.

Примечание:рамка типа double будет отображаться некорректно, если минимальная ширина будет меньше 3 px.

Пример записи кода:

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Попробуем задать разные значения границы для нашего блока.


Пример записи кода:

h1 { border-top-width: 28px; border-top-style:solid ; border-top-color: red; border-right-width: 22px; border-right-style:dashed ; border-right-color: gold; border-bottom-width: 10px; border-bottom-style:dotted; border-bottom-color: green; border-left-width: 30px; border-left-style:solid ; border-left-color: blue; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


В сокращенном виде код выглядит красивее.


h1 { border-top: 28px solid red; border-right: 22px dashed gold; border-bottom: 10px dotted green; border-left: 30px solid blue; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Можно комбинировать и создавать различные эффекты.


h1 { border: 32px solid #EC5B4C; border-bottom: 15px solid gold; } h2 { border: 30px solid #01ABEB; border-bottom-color: #8CB536 }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Далее рассмотрим: Поля (margin) и отступы (padding)