Сейчас мы с вами научимся добавлять границу
элементам. Это делается при помощи трех свойств:
свойство border-width задает толщину
границы, border-color - цвет, а border-style
задает тип границы.
Первые два свойства работают очевидным образом:
border-color принимает цвета в том
же формате, что и свойство color,
а толщина границы задается в пикселях. А
вот свойство border-style принимает
значения в виде ключевых слов. Например,
значение solid задает сплошную линию.
Сделаем, к примеру, границу толщиной 3
пикселя, в виде сплошной линии, красного цвета:
<div id="elem"></div>
#elem {
border-width: 3px; /* толщина 3px */
border-style: solid; /* в виде линии */
border-color: red; /* красный цвет */
width: 300px;
height: 100px;
}
:
Давайте теперь посмотрим на примерах, какие еще есть типы границы.
Значение solid
Значение solid - сплошная линия:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Значение dotted
Значение dotted - линия в виде точек:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: dotted;
border-color: black;
width: 300px;
height: 100px;
}
:
Значение dashed
Значение dashed - линия в виде тире:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: dashed;
border-color: black;
width: 300px;
height: 100px;
}
:
Значение ridge
Значение ridge - выпуклая линия:
<div id="elem"></div>
#elem {
border-width: 3px;
border-style: ridge;
border-color: black;
width: 300px;
height: 100px;
}
:
Значение double
Значение double - двойная линия:
<div id="elem"></div>
#elem {
border-width: 5px;
border-style: double;
border-color: black;
width: 300px;
height: 100px;
}
: