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