CSS3 wprowadza nową — moim zdaniem — prze­łomową funk­cjonal­ność, która znacz­nie ułatwi kreowanie stron inter­netowych. Jest to parametr umoż­liwiający tworzenie zaokrągleń. Co ciekawe, zaokrąglenia są na tyle inteligentne, że wpływają także na obramowania oraz cienie.

Skład­nia jest bar­dzo prosta:

border-radius: promień zaokrąglenia;

Przy­kład:

border-radius: 20px;

Oczywi­ście możemy zdefiniować różne war­to­ści dla poszczegól­nych narożników:

border-radius: przekątna-od-górnego-lewego przekątna-od-górnego-prawego;

border-radius: 20px 0px;

Przy­kład 2:

border-radius: góra-lewy góra-prawy dół-prawy dół-lewy;

border-radius: 5px 20px 0px 50px;

Możemy rów­nież określić stopień zaokrąglenia piono­wego i poziomego każ­dego z naroż­ników. Trzeba jed­nak użyć do tego stan­dar­dowej nazwy parametrów dla kaz­dego z naroż­ników tj. border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius. Każdy z tych parametrów posiada 2 opcje — promień poziomy oraz promień pionowy.

Przy­kład:

border-top-left-radius: 50px 20px;

Obsługa w róż­nych przeglądarkach

Nie­stety skład­nia nie jest ujed­nolicona. W przy­padku prze­glądarek opar­tych o sil­nik WebKit wystar­czy dodać –webkit– na początku kaz­dego z parametrów, dla firefoxa są to:

• –moz-border-radius,
• –moz-border-radius-topleft,
• –moz-border-radius-topright,
• –moz-border-radius-bottomleft,
• –moz-border-radius-bottomright

Opera nie obsługuje zaokrągleń lecz można użyć SVG do emulacji tego efektu(pamiętajmy jed­nak, że nie będzie on posiadał tych samych właściwości).

background:  silver url("border.svg");
-webkit-border-radius: 1em;
-moz-border-radius: 1em; border-radius: 1em;

Plik border.svg

<rect fill="white"  x="0" y="0" width="100%" height="100%" />
<rect fill="silver"  x="0" y="0" width="100%" height="100%" rx="1em"/>

O for­macie SVG jed­nak napiszę kilka oddziel­nych notek ponie­waż tech­nologia ta bar­dzo mi się podoba a jest pomijana w artykułach oraz pracach tworzonych przez współ­czesnych programistów stron internetowych.