Свойство border в CSS

0 ∞

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

Содержание

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

Свойство border-style позволяет определить тип (стиль) границы.

Это свойство принимает разные значения:

  • dotted – граница в точку;
  • dashed – граница в штрих;
  • solid – цельная граница;
  • double – двойная граница;
  • groove – трёхмерная граница. Эффект зависит от того, каким будет значение свойства border-color;
  • ridge - трёхмерная граница. Эффект зависит от того, каким будет значение свойства border-color;
  • inset – трёхмерная утопленная граница. Эффект зависит от того, каким будет значение свойства border-color;
  • outset - трёхмерная выпуклая граница. Эффект зависит от того, каким будет значение свойства border-color;
  • none – отключение;
  • hidden – скрытые границы.

У свойства HTML 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;}
CSS-свойство border

Посмотреть результат

Важно! Ни одно из приведенных выше свойств border HTML не вступит в силу, если не установлено значение border-style!

Border Width CSS

Свойство border-width определяет ширину границы по любой из четырех сторон элемента.

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

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

Пример

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

Посмотреть результат

Border Color CSS

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

Цвет можно указывать несколькими способами:

  • Названием – вписывается название цвета (например, red);
  • Hex – указывается hex-значение цвета (например, #FF0000);
  • RGB – указывается RGB-значение цвета (например, rgb(255,0,0));
  • transparent (прозрачная).

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

Если не выставить свойство border-color, то границы будут наследовать цвет элемента.

Пример

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
}

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}
Изучаем свойство padding в CSS и свойство margin в CSS

Посмотреть результат

Стилизация границ по-отдельности

В CSS есть свойства border HTML для определения стиля каждой стороны элемента (top, right, bottom и left).

Пример

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

Посмотреть результат

Подобного результата можно добиться и следующим методом:

Пример

p {
    border-style: dotted solid;
}

Посмотреть результат

Как это работает

Если у свойства HTML border style будет четыре значения:

  • border-style: dotted solid double dashed;
  • верхняя граница имеет значение dotted;
  • правая граница имеет значение solid;
  • нижняя граница имеет значение double;
  • левая граница имеет значение dashed.

Если у border-style будет три значения:

  • border-style: solid dotted double;
  • верхняя граница имеет значение dotted;
  • правая и левая границы имеют значение solid;
  • нижняя граница имеет значение double.

Если у border-style будет два значения:

  • border-style: solid dotted;
  • верхняя и нижняя границы имеют значение dotted;
  • правая и левая границы имеют значение solid.

Если у HTML border style будет одно значение:

  • border-style: dotted;
  • то все четыре границы будут иметь значение dotted.

В примерах, приведенных выше, мы использовали свойство border-style. Но учтите, что те же правила применения касаются и border-width, и border-color.

border-radius CSS

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

Как видно из примеров, при стилизации границ элементов нужно применять довольно много разных свойств. Чтобы сократить код, можно использовать специальное свойство border:

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

Пример

p {
    border: 5px solid red;
}

Посмотреть результат

Это же свойство можно использовать и для стилизации границ по отдельным сторонам элемента.

Левая граница

 

p {
    border-left: 6px solid red;
    background-color: lightgrey;
}

Посмотреть результат

Нижняя граница

 

p {
    border-bottom: 6px solid red;
    background-color: lightgrey;
}

Посмотреть результат

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

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

Пример

p {
    border: 2px solid red;
    border-radius: 5px;
}

Посмотреть результат

Примечание: свойство border-radius не поддерживается в IE8 и более ранних версиях этого браузера.

Больше примеров

Как одним выражением стилизовать сразу все верхние границы
Стилизуем нижнюю границу элементов
Устанавливаем ширину левой границы
Указываем цвет четырех границ
Указываем цвет только правой границы элемента