CSS-свойство: border

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

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

Свойство 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;}

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

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

Border Width

Свойство 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

Свойство 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;
}

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

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

В 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: dotted solid double;
  • верхняя граница имеет значение dotted;
  • правая и левая границы имеют значение solid;
  • нижняя граница имеет значение double.

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

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

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

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

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

Сокращенное свойство 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 и более ранних версиях этого браузера.

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

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

Перевод статьи “CSS Borders” был подготовлен дружной командой проекта Сайтостроение от А до Я.

21 февраля 2017 в 13:42
Вам понравился сайт или конкретно эта страница? Поделитесь ею со своими друзьями, нажав на одну из кнопок соцсетей слева или снизу. Желаете быть в курсе последних обновлений сайта — подпишитесь удобным для вас образом:
или поддержите нас, нажав на кнопку "Мне нравится"!
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок