CSS border-radius

Border-radius — это свойство в CSS, которое позволяет закруглить углы строчных и блочных элементов.

Кривая для каждого угла определяется с помощью одного или двух радиусов, определяющих его форму — круга или эллипса.

Радиус распространяется на весь фон, даже если элемент не имеет границ. Точное положение секущей определяется с помощью свойства background-clip.

Свойство border-radius позволяет закруглить все углы одновременно. С помощью свойств border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius можно закруглить каждый угол отдельно.

Но также есть еще способ, скруглить нужные углы.

Примеры: