Border-width

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

border-width
hodnoty šířka rámečku
pixely nebo jiný rozměr kromě procent šířka rámečku v pixelech
0px rámeček tam nebude
thin slabý rámeček
medium středně silný rámeček
thick tlustý rámeček

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

Podpora border-width
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer od verze 7 správně dříve započítával šířku rámečku do šířky prvku jakoby box-sizing: border-box
Firefox všechny verze  
Chrome, Opera všechny verze  

Varianty vlastnosti

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.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.