CSS Border Radius Generator

Используйте полную запись: border-radius: top-left top-right bottom-right bottom-left. Например, border-radius: 10px 0 10px 0 скруглит только верхний левый и нижний правый углы. Для одного угла: border-top-left-radius: 20px.

Через слэш можно задать горизонтальный и вертикальный радиус отдельно: border-radius: 50px / 25px создаёт овальное скругление. Полная запись: border-radius: h1 h2 h3 h4 / v1 v2 v3 v4. Это позволяет создавать органические формы вроде «капли» или «яйца».

Задайте border-radius: 50% на квадратный элемент (равные width и height). Для прямоугольника 50% создаст эллипс. Для «таблетки» (pill shape) используйте border-radius: 9999px — скругление будет максимальным по короткой стороне.

Да, при overflow: hidden содержимое обрезается по скруглённым углам. Это стандартный приём для карточек с изображениями. Без overflow: hidden дочерние элементы могут «выступать» за скруглённые углы, особенно если у них свой фон.

border-radius поддерживается во всех современных браузерах без префиксов. Эллиптические значения и процентные единицы тоже работают повсеместно. Единственное ограничение — старые версии IE (8 и ниже), которые уже не актуальны.