Границы объектов в Css
border - атрибут, задающий стили границ объектов. С его помощью, можно настроить их толщину, цвет и исполнение.
Все стили для границ, чаще всего, пишутся именно внутри этого атрибута, без использования дополнительных. Это делается следующим образом:
border:2px solid #333;
Таким образом, мы задали границу для объекта со следующими её параметрами: ширина - 2 пикселя, исполнение - сплошная линия, цвет - тёмно-серый (#333333).
Теперь обо всех них подробнее:
border-color - атрибут, который задаёт цвет границ объекта. Может быть задан одним, двумя, тремя, или четырьмя значениями:
- Если выставлено одно значение, то такой цвет будет задан для всех границ;
- Если выставлено два значения, то первое значение - верхняя и нижняя границы, а второе - левая и правая;
- Если выставлено три значения, то первое задаёт цвет верхней границы, второе - левой и правой, третье - нижней.
Также, цвет границ можно задать с помощью дополнительных атрибутов:
border-top-color - задаёт цвет верхней границы;
border-bottom-color - задаёт цвет нижней границы;
border-left-color - задаёт цвет левой границы;
border-right-color - задаёт цвет правой границы;
Примеры:
Зададим цвет левой границы #e2e2e2:
border-left-color: #e2e2e2;
border-style - атрибут, который задаёт тип границ объекта. Задаётся с помощью установленных значений:
none - отсутствие границы (значение по умолчанию);
dashed - штриховая граница;
dotted - точечная граница;
double - двойная сплошная линия;
groove - трёхмерная вдавленная граница;
ride - трёхмерная выпуклая граница;
solid - сплошная одинарная граница;
inset - трёхмерная «ступенька вверх»;
outset - трёхмерная «ступенька вниз»;
Также, тип границ можно задать с помощью дополнительных атрибутов:
border-top-style - задаёт тип верхней границы;
border-bottom-style - задаёт тип нижней границы;
border-left-style - задаёт тип левой границы;
border-right-style - задаёт тип правой границы;
Примеры:
Зададим тип левой границы простой сплошной линией:
border-left-style: solid;
border-width - атрибут, который задаёт толщину границ объекта. Может быть задан одним, двумя, тремя, или четырьмя значениями:
- Если выставлено одно значение, то такой толщина будет задана для всех границ;
- Если выставлено два значения, то первое значение - верхняя и нижняя границы, а второе - левая и правая;
- Если выставлено три значения, то первое задаёт толщину верхней границы, второе - левой и правой, третье - нижней.
Также толщину можно задать с помощью установленных значений:
thin - тонкая линия;
medium - средняя линия;
thick - толстая линия;
Толщину границ можно задать с помощью дополнительных атрибутов:
border-top-width - задаёт ширину верхней границы;
border-bottom-width - задаёт ширину нижней границы;
border-left-width - задаёт ширину левой границы;
border-right-width - задаёт ширину правой границы;
Примеры:
Зададим ширину левой границы в 5 пикселей:
border-left-width: 5px;
