Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.
Wielu elementom można nadawać obramowanie - z jednej lub kilku stron. Górny brzeg obramowania definiujemy następująco (tylko NC4 - IE4 realizuje polecenie w ramach definicji mieszanej):
<p style="border-top-width: 1mm">Akapit z górnym obramowaniem</p>
Akapit z górnym obramowaniem (tylko NC4, ale nie Netscape 6)
<p style="border-right-width: 1mm">Akapit z prawym obramowaniem</p>
Akapit z prawym obramowaniem (tylko NC4, ale nie Netscape 6)
<p style="border-bottom-width: 1mm">Akapit z dolnym obramowaniem</p>
Akapit z dolnym obramowaniem (tylko NC4, ale nie Netscape 6)
<p style="border-left-width: 1mm">Akapit z lewym obramowaniem</p>
Akapit z lewym obramowaniem (tylko NC4, ale nie Netscape 6)
Elementowi można przypisać obramowanie, podając szerokości obramowania kilku stron jednocześnie (realizowane z błędami).
<p style="border-width: 3mm 2mm">Akapit</p>Akapit
Dodatkowym atrybutem, który można zastosować w obramowaniu, jest kolor.
<p style="border-bottom-width: thick; border-color: red">Akapit z dolnym, grubym czerwonym obramowaniem</p>
Akapit z dolnym, grubym czerwonym obramowaniem (tylko NC4)
<p style="border-top-width: thin; border-color: red">Akapit z górnym, cienkim czerwonym obramowaniem</p>
Akapit z górnym, cienkim czerwonym obramowaniem (tylko NC4)
<p style="border-left-width: medium; border-color: red">Akapit z lewym, średnim czerwonym obramowaniem</p>
Akapit z lewym, średnim czerwonym obramowaniem (tylko NC4)
Dodatkowe polecenie umożliwia zdefiniowanie stylu obramowania (IE4 realizuje tylko częściowo i odmiennie od NN). Border-style przybiera wartości: none, dotted (nie realizowane), dashed (nie realizowane), solid, double, groove, ridge, inset, outset.
<p style="border: styl">Akapit</p>
Przykłady:
border: none
border: dashed
border: dotted
border: solid 2mm
border: double 3mm
border: groove 5mm red
border: ridge 5mm
border: inset 5mm
border: outset 5mm
Górne obramowanie może mieć definicję mieszaną, np.:
<p style="border-top: solid red thick">Akapit</p>
To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu.
Proszę zauważyć, że IE nie dostrzega polecenia border-top-width, ale poprawnie interpretuje definicję mieszaną! Odwrotnie zachowuje się NN!! To jeszcze jeden powód zachowywania należnej ostrożności w posługiwaniu się stylami.
Prawe obramowanie może mieć definicję mieszaną, np.:
<p style="border-right: solid olive double">Akapit</p>
To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu.
Dolne obramowanie może mieć definicję mieszaną, np.:
<p style="border-bottom: solid red fuchsia">Akapit</p>
To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu.
Lewe obramowanie może mieć definicję mieszaną, np.:
<p style="border-left: groove yellow 2mm">Akapit</p>
To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu.
Definiując obramowanie, możemy stosować definicję mieszaną, w której podamy jedynie polecenie border i wartości, rezygnując z wymieniania własności. Zamiast:
border-width: thick; border-style: double; border-color: red
Możemy wpisać po prostu:
border: thick double red