Стилизация HTML : Границы CSS

Введение в CSS BORDERS

CSS Border — это свойство, позволяющее стилизовать границы элементов HTML, например, цвет, ширину и тип.

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

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

• пунктирная — определяет пунктирную границу
• пунктирная — Определяет пунктирную границу
• сплошная — Определяет сплошную границу
• двойная — Определяет двойную границу
• желобок — Определяет трехмерную желобчатую границу.
• гребень — Определяет 3D-границу с гребнем.
• вставка — Определяет трехмерную вставную границу.
• outset — Определяет трехмерную границу outset.
• none — Определяет отсутствие границы
• скрытая — Определяет скрытую границу.

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

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;}

Цвет границы

Border-color — это свойство css, которое позволяет задать цвет границ HTML-элемента.

Цвет границы может быть задан следующими четырьмя способами

• имя цвета : указав имя цвета, например, «зеленый».
• шестнадцатеричное значение : указав шестнадцатеричное значение, например, «#f4f4f4».
• RGB : указав значение RGB, например, «rgb(255, 99, 71)».
• прозрачный : установив значение прозрачный

Стороны границы

Обычно граница может быть задана с четырех сторон, а именно слева, справа, сверху и снизу.
Однако CSS предоставляет свойства, которые можно использовать для стилизации отдельных сторон границы HTML-элемента.

Примеры

p {
       border-color : blue;
           border-top-style: dotted;
    }

    p {
       border-color : blue;
       border-right-style: solid;
    }

    p {
       border-color : blue;
       border-bottom-style: dotted;
    }

    p {
       border-color : blue;
       border-left-style: solid;
    }

*Сокращение границ

Как и все основные языки, CSS позволяет использовать сокращение при использовании свойств границ.
Как видите, при использовании границ необходимо учитывать множество свойств. Но если сократить код, то можно стилизовать границу одним свойством, используя свойство «border».
Вы также можете стилизовать одну сторону, используя «border-left», «border-right», «border-top» или «border-bottom».

Пример

p {
       border: 3px dotted blue;
      }

    p {
       border-left: 5px solid blue;
      }

    p {
       border-right: 5px solid blue;
      }

     p {
        border-top: 5px solid blue;
       }

     p {
        border-bottom: 5px solid blue;
       }

Закругленные границы

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

Пример

p {
        border: 3px solid blue;
        border-radius : 7px
      }

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

• border : Устанавливает все свойства границы в одном объявлении
• border-bottom : Устанавливает все свойства нижней границы в одном объявлении
• border-bottom-color : Устанавливает цвет нижней границы
• border-bottom-style : Устанавливает стиль нижней границы
• border-bottom-width : Устанавливает ширину нижней границы
• border-color : Устанавливает цвет четырех границ
• border-left : Устанавливает все свойства левой границы в одном объявлении
• border-left-color : Устанавливает цвет левой границы
• border-left-style : Устанавливает стиль левой границы
• border-left-width : Устанавливает ширину левой границы
• border-radius : Устанавливает все четыре свойства border-*-radius для закругленных углов
• border-right : Устанавливает все свойства правой границы в одном объявлении
• border-right-color : Устанавливает цвет правой границы
• border-right-style : устанавливает стиль правой границы
• border-right-width : Устанавливает ширину правой границы
• border-style : Устанавливает стиль четырех границ
• border-top : Устанавливает все свойства верхней границы в одном объявлении
• border-top-color : Устанавливает цвет верхней границы
• border-top-style : Устанавливает стиль верхней границы
• border-top-width : Устанавливает ширину верхней границы
• border-width : Устанавливает ширину четырех границ