Obramowania

Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.

Szerokość górnego obramowania

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)

Szerokość prawego obramowania

<p style="border-right-width: 1mm">Akapit z prawym obramowaniem</p>

Akapit z prawym obramowaniem (tylko NC4, ale nie Netscape 6)

Szerokość dolnego obramowania

<p style="border-bottom-width: 1mm">Akapit z dolnym obramowaniem</p>

Akapit z dolnym obramowaniem (tylko NC4, ale nie Netscape 6)

Szerokość lewego obramowania

<p style="border-left-width: 1mm">Akapit z lewym obramowaniem</p>

Akapit z lewym obramowaniem (tylko NC4, ale nie Netscape 6)

Mieszane atrybuty szerokości obramowania

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

Kolor obramowania

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)

Styl obramowania

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

Mieszane atrybuty górnego obramowania

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.

Mieszane atrybuty prawego obramowania

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.

Mieszane atrybuty dolnego obramowania

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.

Mieszane atrybuty lewego obramowania

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.

Mieszane atrybuty obramowania

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