Pójdę o zakład, że jednym z częściej wykorzystywanych na stronach efektów będą zaokrąglone rogi pojemników. Umiejętnie wykorzystane, mogą być przyjemnym elementem wizualnej strony witryny.

Załóżmy, że mamy jakiś pojemnik - oczywiście aby można go było zobaczyć, powinien mieć odmienne tło. Niech definicja bloku będzie następująca:

Jednostkami miary mogą być px, pt, em, ale nie %.

I przykład:

Dodajmy dla porządku, że na razie stosujemy dodatkowo prefiksy, a nie wyłącznie czystą postać definicji, czyli -webkit-border-radius i -moz-border-radius, dzięki czemu czytają je Firefox, Chrome i Safari.

Zauważ, że wartość border-radius: 10px zaokrągla wszystkie rogi jednocześnie. Gdybyśmy chcieli zaokrąglić je w różnym stopniu, musielibyśmy wymienić kilka wartości, od lewego górnego zgodnie ze wskazówkami zegara, a więc np. border-radius: 10px 20px 20px 0px. 

Można też wymienić wybrane rogi, stosując border-top-left-radius, border-top-right-radius, border-bottom-right-radius i border-bottom-left-radius.

Gdy mamy ściśle określone wymiary pojemnika, uzyskujemy coraz większe zaokrąglenie, podając coraz wyższą wartość zaokrąglenia, np. 20px 50px 50px 50px.

Jeśli pojemnik jest kwadratowy, podanie zaokrągleń o wielkości połowy boku uczyni z pojemnika koło.

Naturalnie możemy dowolnie definiować tło pojemnika, kolor, grubość i styl obramowania, uzyskując potrzebne nam wyniki. Można też oczywiście łączyć takie obramowania z cieniowaniem.