CSS Borders
Свойства границы CSS
Свойства CSS border позволяют задавать стиль, ширину и цвет границы элемента.
У меня есть границы со всех сторон.
У меня есть красная Нижняя граница.
У меня округлые границы.
Стиль границы
Свойство border-style указывает тип отображаемой границы.
Допустимы следующие значения:
dotted- Определяет пунктирную границуdashed- Определяет пунктирную границуsolid- Определяет сплошную границуdouble- Определяет двойную границуgroove- Определяет 3D канавку границы. Эффект зависит от значения цвета границыridge- Определяет трехмерную ребристую границу. Эффект зависит от значения цвета границыinset- Определяет 3D-вставку границы. Эффект зависит от значения цвета границыoutset- Определяет трехмерную границу начала. Эффект зависит от значения цвета границы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;}
Result:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Примечание: Никакие другие свойства границы CSS, описанные ниже, не будут иметь никакого эффекта, если не задано свойство border-style!
Ширина границы
Свойство border-width задает ширину четырех границ.
Ширина может быть задана как конкретный размер (в px, PT, cm, EM и т.д.) или с помощью одного из трех предварительно определенных значений: тонкий, средний, или толстый.
Свойство 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 используется для задания цвета четырех границ.
Цвет может быть установлен:
- Name-укажите имя цвета, например "Red"
- Hex-укажите шестнадцатеричное значение, например "#ff0000"
- RGB-укажите RGB-значение, например "RGB (255, 0, 0)"
- Прозрачный
Свойство 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 есть также свойства для указания каждой из границ (верхняя, правая, Нижняя и левая):
Пример
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Приведенный выше пример дает тот же результат:
Пример
p {
border-style: dotted solid;
}
Итак, вот как это работает:
Если свойство border-style имеет четыре значения:
- стиль границы: пунктирная Сплошная двойная пунктирная;
- Верхняя граница пунктирная
- Правая граница сплошная
- Нижняя граница двойная
- Левая граница пунктирная
Если свойство border-style имеет три значения:
- Пограничный стиль: точечный сплошной двойной;
- Верхняя граница пунктирная
- правая и левая границы являются сплошными
- Нижняя граница двойная
Если свойство border-style имеет два значения:
- граница стиля: пунктирная твердая;
- верхние и нижние границы пунктирные
- правая и левая границы являются сплошными
Если свойство border-style имеет одно значение:
- граница стиля: пунктирная;
- все четыре границы пунктирные
Свойство border-style используется в приведенном выше примере. Однако, он также работает с border-width и border-color.
Граница-Сокращенное свойство
Как видно из приведенных выше примеров, есть много свойств, которые следует учитывать при работе с границами.
Чтобы сократить код, можно также указать все свойства отдельных границ в одном свойстве.
Свойство border является сокращенным свойством для следующих отдельных свойств границы:
border-widthborder-style(required)border-color
Пример
p {
border: 5px solid red;
}
Result:
Some text
Можно также указать все свойства отдельных границ только для одной стороны:
Левая граница
p {
border-left: 6px solid red;
background-color: lightgrey;
}
Result:
Some text
Нижняя граница
p {
border-bottom: 6px solid red;
background-color: lightgrey;
}
Result:
Some text
Закругленные границы
Свойство border-radius используется для добавления округленных границ к элементу:
Normal border
Round border
Rounder border
Roundest border
Пример
p {
border: 2px solid red;
border-radius: 5px;
}
Note: The border-radius property is not supported in IE8 and earlier versions.
Другие примеры
Все свойства верхнего края в одном объявлении
В этом примере демонстрируется Сокращенное свойство для задания всех свойств верхней границы в одном объявлении.
Задание стиля нижней границы
В этом примере демонстрируется установка стиля нижней границы.
Задание ширины левой границы
В этом примере показано, как задать ширину левой границы.
Установка цвета четырех границ
В этом примере демонстрируется установка цвета четырех границ. Он может иметь от одного до четырех цветов.
Установка цвета правой границы
В этом примере демонстрируется установка цвета правой границы.
Все свойства границы 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-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 | Задает ширину четырех границ |