Zaokrąglone rogi elementów strony internetowej takich jak różnego rodzaju ramki, formularze itd. to w zasadzie zawsze problem dla programisty. Wygląda to wszystko bardzo ładnie, ale niestety tak prosta sprawa wymaga czasami troszkę gimnastyki. Na szczęście obecnie najnowsze przeglądarki korzystają z dobrodziejstw CSS i wykorzystują właściwość border-radius. Oczywiście Microsoft nie byłby sobą gdyby na tym tle nie odstawał od konkurencji. Niestety w Internet Explorerze nadal musimy korzystać z klasycznych metod (np. odpowiednie grafiki + kod HTML).

Nie jest jednak całkowicie różowo jeśli chodzi o sam zapis właściwości w arkuszu styli. Praktycznie każdy silnik przeglądarki wykorzystuje inny zapis. Między innymi dlatego, że pojawiają się własności CSS rozpoczynające się od myślnika (tzw. rozszerzenia CSS przeglądarki) czyli własności, których nie ma w obowiązujących specyfikacjach W3C, ale które oferowane są przez dany silnik renderujący. Niestety to powoduje, że kod nie przejdzie walidacji.

Przykłady:

.okragle-wszystkie-rogi {
 -webkit-border-radius: 20px; /* Safari, Chrome */
 -khtml-border-radius: 20px;    /* Konqueror */
 -moz-border-radius: 20px; /* Firefox */
  border-radius: 20px;}

Powyższy kod spowoduje zaokrąglenie o promieniu 20px wszystkich czterech rogów. Jeśli chcemy zmienić np. 2 rogi (prawy górny i lewy dolny) musimy skorzystać z takiego kawałka kodu:

.okragle-dwa-rogi {
 -webkit-border-top-right-radius: 20px; /* prawy górny */
 -webkit-border-bottom-left-radius: 20px; /* lewy dolny */
 -khtml-border-radius-topright: 20px;
 -khtml-border-radius-bottomleft: 20px;
 -moz-border-radius-topright: 20px;
 -moz-border-radius-bottomleft: 20px;
  border-top-right-radius: 20px
  border-bottom-left-radius: 20px;}