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 |
Při slabém rámečku (border-width 1px) se v IE vykresluje dotted (tečkovaný) rámeček jako dashed (čárkovaný). Je to škoda, protože tečkování by se hodilo zrovna u jednopixelového rámečku.
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| 4, 5 | dotted a dashed vykresluje jako solid | |
| Internet Explorer | 5.5, 6 | dashed umí, 1px dotted vykresluje jako 1px dashed |
| Mozilla (Netscape 6+) | všechny verze | |
| Opera | 4, 5, 6, 7 | |
| Konqueror | ano | |
| IE 5 / Mac | ano | |
| Netscape Navigator 4 | ano | neumí dotted a dashed |
Netscape 4 tyto vlastnosti nezná.
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:.tlacitkohover {border-style: inset;} /* zatlačený rámeček */
</style>
<a href="#kamkoliv" class="tlacitko">tlačítko zadané třídou</a>
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).
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.
Barvy v CSS, Border = rámeček, Border-color = barva rámečku, Border-width = šířka rámečku, Border-collapse = slévání rámečků buněk
o tvorbě, údržbě a zlepšování internetových stránek