border-radius

Аби заокруглити всі кути рамки, застосовується властивість border-radius. Значення можуть бути як абсолютні (px), так і відносні (%). Якщо квадратному елементу задати радіус 50%, це перетворить його на коло.

border-radius: 10px;

border-radius: 20%;

Так само є властивості, що дозволяють заокруглити кожен кут рамки окремо.

/* верхній лівий кут */
border-top-left-radius: значення;

/* верхній правий кут */
border-top-right-radius: значення;

/* нижній правий кут */
border-bottom-right-radius: значення;

/* нижній лівий кут */
border-bottom-left-radius: значення;