Border-style

CSS vlastnost border-style určuje vzhled (druh) rámečku.

Dají se najednou zadávat různé druhy rámečků pro jednotlivé strany. Kromě toho pro jednotlivé strany existují varianty vlastnosti border-top-style, border-right-style, border-bottom-style, border-left-style. Aby se druh rámečku projevil, není nutné zadávat border-width (šířka rámečku bude medium) ani border-color (barva bude podle písma).

border-style
hodnoty druh rámečku příklad
solid plný

border-style: solid

dotted tečkovaný

border-style: dotted

dashed čárkovaný

border-style: dashed

double dvojitý

border-style: double

groove příkop

border-style: groove

ridge val

border-style: ridge

inset ďolík

border-style: inset

outset návrší

border-style: outset

none žádný

border-style: none

Podpora

Od verze Internet Explorer 7 už všechny prohlížeče vykreslují boder-style bez chyb a problémů.

Podpora border-style
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer všechny verze  
Mozilla (Firefox, Netscape 6+ atd.) všechny verze  
Opera všechny verze  
Chrome všechny verze  

Varianty vlastnosti

Příklady

Vystouplé tlačítko zapsané přímým stylem:

<a href="#kamkoliv" style="border-style: outset; border-width: 8px">tlačítko</a>

tlačítko

Hodnota outset znamená optické vystoupnutí ven. Kdyby bylo potřeba udělat například změnu vystoupnutí při přejetí myší (hover), musí se to zapsat stylopisem (protože hover přímo zapsat nelze):

<style>
a.tlacitko {border-style: outset; border-width: 8px; text-decoration: none} /* vystouplý rámeček, text není podtržený */
a.tlacitko:hover {border-style: inset;} /* zatlačený rámeček */
</style>
<a href="#kamkoliv" class="tlacitko">tlačítko zadané třídou</a>

Odkaz na příklad tohoto tlačítka.

V praxi se ještě přidává padding, aby to bylo hezké. Doporučuji zadat border-color, protože Explorer vykreslí rámeček černo-šedo-bílý, protože černá je barva textu, ale Mozilla kreslí modro-bílo, protože modrá je barva odkazu.

Dosavadní příklady nebudou fungovat v prohlížeči IE 5.0 a nižších, protože neumějí dát rámeček řádkovým prvkům (přičemž odkaz <a> je řádkový prvek).

4 různé rámečky stran

Dá se nastavit druh každé strany objektu. Dejme tomu, že budu chtít mít odstavec <p class="divny"> orámovaný dvoupixelovým rámečkem: nahoře tečkovaně, vpravo plně, dole nijak a vpravo tečkovaně. Dá se to zapsat těmito způsoby:

p.divny {border-width: 2px; border-top-style: dotted; border-right-style: solid; border-bottom-style: none; border-left-style: dotted}
/* nebo */
p.divny2 {border-width: 2px; border-style: dotted solid none dotted}

Zobrazit tento příklad 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.