Скруглённые углы

Скруглённые углы встречаются на современных сайтах повсюду: у кнопок, карточек, полей ввода и фотографий профиля. Они создаются свойством border-radius:

border-radius: 10px;

Значение — это радиус скругления: чем он больше, тем круглее углы. Скругление применяется ко всему блоку, поэтому оно работает и у элемента, у которого есть только цвет фона и нет рамки.

Полезны и проценты: border-radius: 50% превращает квадрат в круг, так делают круглые фотографии профиля. Вот блок с border-radius: 12px и квадрат с border-radius: 50%: