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).
| 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ů.
| 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
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
Příklady
Vystouplé tlačítko zapsané přímým stylem:
<a href="#kamkoliv" style="border-style: outset; border-width: 8px">tlačítko</a>
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
