CSS3 wpro­wa­dza nową — moim zda­niem — prze­ło­mową funk­cjo­nal­ność, która znacz­nie uła­twi kre­owa­nie stron inter­ne­to­wych. Jest to para­metr umoż­li­wia­jący two­rze­nie zaokrą­gleń. Co cie­kawe, zaokrą­gle­nia są na tyle inte­li­gentne, że wpły­wają także na obra­mo­wa­nia oraz cienie.

Skład­nia jest bar­dzo prosta:

border-radius: promień zaokrąglenia;

Przy­kład:

border-radius: 20px;

Oczy­wi­ście możemy zde­fi­nio­wać różne war­to­ści dla poszcze­gó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ć sto­pień zaokrą­gle­nia pio­no­wego i pozio­mego każ­dego z naroż­ni­ków. Trzeba jed­nak użyć do tego stan­dar­do­wej nazwy para­me­trów dla kaz­dego z naroż­ni­ków tj. border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius. Każdy z tych para­me­trów posiada 2 opcje — pro­mień poziomy oraz pro­mień 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­no­li­cona. W przy­padku prze­glą­da­rek opar­tych o sil­nik WebKit wystar­czy dodać –webkit– na początku kaz­dego z para­me­trów, dla fire­foxa są to:

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

Opera nie obsłu­guje zaokrą­gleń lecz można użyć SVG do emu­la­cji tego efektu(pamiętajmy jed­nak, że nie będzie on posia­dał 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­ma­cie SVG jed­nak napi­szę kilka oddziel­nych notek ponie­waż tech­no­lo­gia ta bar­dzo mi się podoba a jest pomi­jana w arty­ku­łach oraz pra­cach two­rzo­nych przez współ­cze­snych pro­gra­mi­stów stron internetowych.