[CSS] Jak zaokrąglić rogi?

Zaokrąglanie rogów za pomocą CSS jest bardzo proste. Używa się do tego celu właściwości border-radius (dla wszystkich rogów) lub border-top-left|right-radius, border-bottom-right|left-radius (dla wybranego rogu), gdzie w pikselach lub procentach podajemy rozmiar zaokrąglenia.

Przykład 1

<div class="square"></div>

.square {

border-radius: 5px;
width: 100px;
height: 100px;

}

Można oczywiście zaokrąglić wszystkie rogi naraz, ale również każdy pojedynczo.

Przykład 2

<div class="rectangle"></div>

.rectangle {

border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
width: 200px;
height: 80px;

}