Зараз ми з вами навчимося додавати кордон
елементів. Це робиться за допомогою трьох властивостей:
властивість border-width задає товщину
кордону, border-color - колір, а border-style
задає тип кордону.
Перші дві властивості працюють очевидним чином:
border-color приймає кольори в тому
ж форматі, що і властивість color,
а товщина кордону визначається в пікселях. А
ось властивість border-style приймає
значення у вигляді ключових слів. Наприклад,
значення solid задає суцільну лінію.
Зробимо, наприклад, кордон завтовшки 3
пікселя, у вигляді суцільної лінії, червоного кольору:
<div id="elem"></div>
#elem {
border-width: 3px; /* товщина 3рх */
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;
}
: