Border-width

CSS vlastnost border-width určuje šířku rámečku.

Aby se rámeček vykreslil, musí být zadána vlastnost border-style (nebo border). Výchozí šířkou je medium, což jsou asi 3 pixely (ale neměřil jsem to a může to být v každém prohlížeči jinak).

Šířka rámečků různých stran se dá zadat pomocí vlastností border-strana-width, nebo všechny najednou vlastností border-width.

Podpora

Varianty vlastnosti

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Netscape 4 tyto vlastnosti nezná.

Příklady

Hodně často se rámečky používají na tlačítka. Někdy se dělají třeba tagem <div class="tlacitko">. Kdybych chtěl mít zeleně vystouplé tlačítko, styl vypadá takto:

.tlacitko {border-style: outset; border-width: 5px; border-color: green}

Může nastat situace, kdybych chtěl mít některá tlačítka silnější. Hodí se mi předchozí deklarace (chci ji částečně využít), ale chci mít rámeček desetipixelový. Můžu to udělat třeba přímým stylem:

<div class="tlacitko" style="border-width: 10px">

Jiný způsob je vytvořit ještě jednu třídu (class="sirsi") a přidat ji k tlačítku spolu s předchozí třídou:

<div class="tlacitko sirsi">

prvek potom převezme styl obou tříd, třída sirsi bude mít prioritu (je v pořadí poslednější). Zápis třídy sirsi:

.sirsi {border-width: 10px}

Hodnoty thin, thick a medium se v praxi používají zřídka, protože potom není nikde zaručeno, jak budou přesně široké. Hodí se tam, kde je dokument více informační a nezáleží na přesném vzhledu tolik jako na přenositelnosti mezi médii.

Border-width je také použita v příkladu na border-style.

Vizte též

Barvy v CSS, Border = rámeček, Border-style = druh rámečku, Border-color = barva rámečku, Módy prohlížečů, -moz-box-sizing = započítání rámečků do šířky v Mozille, Width = šířka prvku