Својство border-width
Својството border-width ја поставува дебелината
на границата за сите страни истовремено или
одделно за секоја страна. Претставува кратенка-својство
за својствата border-left-width,
border-right-width,
border-top-width,
border-bottom-width.
Вредноста на својството се било кои единици
за димензии, освен проценти, или клучни
зборови thin (граница од 2 пиксели),
medium (граница од 4 пиксели) или thick
(граница од 6 пиксели). Вредност по
стандард: medium.
Синтакса
селектор {
border-width: 1, 2, 3 или 4 вредности;
}
Број на вредности
Својството може да прими 1, 2,
3 или 4 вредности, наведени
преку празно место:
| Број | Опис |
|---|---|
1 |
Тип за сите страни истовремено. |
2 |
Прва вредност за горниот и долниот дел, втора - за левата и десната граница. |
3 |
Прва вредност за горниот дел, втора - за левата и десната граница, трета - за долниот. |
4 |
Прва вредност за горната граница, втора - за десната, трета - за долната, четврта - за левата граница. |
Пример
Да поставиме граница со дебелина од еден пиксел:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Пример
Да поставиме граница со дебелина од 4 пиксели:
<div id="elem"></div>
#elem {
border-width: 4px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Пример
Да поставиме дебелина на горната и долната граница
во 1px, а на десната и левата - во 4px:
<div id="elem"></div>
#elem {
border-width: 1px 4px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Пример
Да поставиме дебелина на горната граница во 1px,
десната и левата - во 4px, а долната во
6px:
<div id="elem"></div>
#elem {
border-width: 1px 4px 6px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Пример
Да поставиме дебелина на горната граница во 1px,
десната во 4px, долната - во 6px,
а левата во 8px:
<div id="elem"></div>
#elem {
border-width: 1px 4px 6px 8px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Пример
Да поставиме дебелина на границата со клучен збор thin:
<div id="elem"></div>
#elem {
border-width: thin;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Пример
Да поставиме дебелина на границата со клучен збор medium:
<div id="elem"></div>
#elem {
border-width: medium;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Пример
Да поставиме дебелина на границата со клучен збор thick:
<div id="elem"></div>
#elem {
border-width: thick;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}
:
Пример
Да поставиме различна граница за различни страни:
<div id="elem"></div>
#elem {
border-width: 1px 2px 3px 4px;
border-style: dashed dotted solid double;
border-color: red blue green black;
width: 300px;
height: 100px;
}
:
Погледнете ги и
-
својството
border-style,
кое го одредува изгледот на границата -
својството
border-color,
кое ја одредува бојата на границата -
својството
border,
кое претставува кратенка-својство за границата