Składnia jest bardzo prosta:

border-radius: promień zaokrąglenia;

Przykład:

border-radius: 20px;

Oczywiście możemy zdefiniować różne wartości dla poszczególnych narożników:

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

border-radius: 20px 0px;

Przykład 2:

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

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

Możemy również określić stopień zaokrąglenia pionowego i poziomego każdego z narożników. Trzeba jednak użyć do tego standardowej nazwy parametrów dla kazdego 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.

Przykład:

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

Obsługa w różnych przeglądarkach

Niestety składnia nie jest ujednolicona. W przypadku przeglądarek opartych o silnik WebKit wystarczy dodać –webkit– na początku kazdego 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 jednak, ż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 formacie SVG jednak napiszę kilka oddzielnych notek ponieważ technologia ta bardzo mi się podoba a jest pomijana w artykułach oraz pracach tworzonych przez współczesnych programistów stron internetowych.

1

box-shadow: przesuniecie-poziome przesuniecie-pionowe promien-rozmycia zasieg kolor inset

Niestety parametr ten obsługują jedynie przeglądarki w oparciu o silnik gecko(Firefox 3.5) oraz WebKit(Safari, Chrome):

Przykład zastosowania:

1
2

box-shadow: 5px 10px 10px 5px #bbb;
-moz-box-shadow: 5px 10px 10px 5px #bbb;

Lorem ipsum dolor sit amet

Zasięg możemy również określić jako ujemny co spowoduje kurczenie się cienia.

1
2

box-shadow: 15px 20px 10px -10px #bbb;
-moz-box-shadow: 15px 20px 10px -10px #bbb;

Lorem ipsum dolor sit amet

Umyślnie pominąłem deklaracje dla silnika WebKit ponieważ nie uwzględnia on zasięgu i cień byłby po prostu niewidoczny. Zalecam więc użycie wersji z 4 parametrami.

1
2
3

box-shadow: 5px 5px 10px #ccc;
-moz-box-shadow: 5px 5px 10px #ccc;
-webkit-box-shadow: 5px 5px 10px #ccc;

Lorem ipsum dolor sit amet

Zastosowanie cieni bez efektu rozmycia:

1
2
3

box-shadow: -5px -5px 0px #ccc;
-moz-box-shadow: -5px -5px 0px #ccc;
-webkit-box-shadow: -5px -5px 0px #ccc;

Lorem ipsum dolor sit amet

Cień wewnętrzny:

Słowo kluczowe inset(uwaga w szkicu W3C jest zapytanie o zmianę nazwy na inner) zmienia zachowanie cienia. Po jego zastosowaniu cień będzie wewnątrz boksu a nie na zewnątrz.

Niestety inset działa jedynie w przeglądarce FireFox 3.5.

1
2
3

background:#ddd;
box-shadow: 5px 5px 10px #fff inset;
-moz-box-shadow: 5px 5px 10px #fff inset;

Lorem ipsum dolor sit amet

Cienie wielokrotne

Dla każdego elementu możemy określić kilka róznych cieni. Odzielamy je przecinkami.

1
2
3

box-shadow: -5px -5px 0px #ccc, 5px 5px 10px #000;
-moz-box-shadow: -5px -5px 0px #ccc, 5px 5px 10px #000;
-webkit-box-shadow: -5px -5px 0px #ccc, 5px 5px 10px #000;

Lorem ipsum dolor sit amet

text-shadow

Aby dodać cień do naszego tekstu wystarczy zdefiniować jego właściwości za pomocą text-shadow.

1

text-shadow: przesuniecie-poziome przesuniecie-pionowe rozmycie kolor;

Przykład użycia

1
2

font-size:14px;
text-shadow: -10px 5px 2px #f00;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et nunc id erat tempus iaculis. Phasellus congue nunc quis nibh congue rutrum sit amet eu velit. Etiam non ligula convallis tortor scelerisque consectetur at nec nunc. Integer eu purus odio, ac placerat erat

Przy umiejętnym zastosowaniu efekty mogą być zadziwiające. Można np. ustawiając wysokie rozmycie zemulować efekt podświetlanego tła.

1
2
3
4

background:#111;
font-size:18px;
text-shadow: 0px 0px 4px #999;
color:#f90;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et nunc id erat tempus iaculis. Phasellus congue nunc quis nibh congue rutrum sit amet eu velit. Etiam non ligula convallis tortor scelerisque consectetur at nec nunc. Integer eu purus odio, ac placerat erat

Cienie wielokrotne

Dla każdego napisu możemy zdefiniować kilka róznych cieni oddzielając je przecinkiem.

1
2
3

line-height:40px;
font-size:18px;
text-shadow: -6px -6px 6px #f00, 0px 0px 6px #00f, 6px 6px 6px #f90;

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Internet Explorer

Okłamałbym was gdybym nie napisał, że w Internet Explorerze da się uzyskać podobny efeket. Microsoft udostępnił parametr filter: shadow, który działa nawet w IE5(sic!). Użycie wygląda mniej więcej tak:

1

filter: Shadow(Color=#333, Direction=135, Strength=5);

Nie będę jednak zagłębiał się w ten temat, gdyż nie jest to poprawne ze standardami W3C.