Різне заокруглення для різних кутів CSS

Різне заокруглення для різних кутів CSS

Властивість border-radius може приймати не тільки одне значення, а й два, три або чотири значення.

Кожне значення відповідає за заокруглення певного кута елемента.

#elem {
  border-radius: 10px 20px 30px 40px;
}

• 1 значення — всі кути мають однакове заокруглення.
• 2 значення — перше для верхнього лівого та нижнього правого кутів, друге для верхнього правого та нижнього лівого.
• 3 значення — задають заокруглення для верхнього лівого, верхнього правого/нижнього лівого та нижнього правого кутів.
• 4 значення — задають окреме значення для кожного кута.