Генератор border-radius

Заокруглює кути повзунками, зокрема еліптично.

Слеш робить кути еліптичними

border-radius приймає до восьми значень, і слеш ділить їх на дві групи: до слеша — горизонтальні радіуси всіх чотирьох кутів, після — вертикальні.

Коли групи різні, кут перестає бути дугою кола й стає дугою еліпса: border-radius: 40px / 20px дає розтягнутий по горизонталі кут. Без слеша обидва радіуси однакові, і кут круглий.

Відсотки рахуються від різних сторін

Горизонтальні радіуси беруть відсоток від ширини елемента, вертикальні — від висоти. Це не одне й те саме число.

Тому border-radius: 50% на квадраті дає коло, а на прямокутнику — еліпс, а не «коло з обрізаними боками», як часто чекають. Щоб вийшло саме коло, елемент має бути квадратним.

Браузер тихо зменшує завеликі радіуси

Якщо сума двох радіусів на одній стороні більша за довжину цієї сторони, браузер не обрізає щось одне — він пропорційно зменшує всі вісім значень, доки вони не влізуть.

Через це виставлені 200px можуть намалюватись як 80px, і жодного попередження не буде. Виглядає як «властивість не працює», хоча вона працює саме так, як написано в специфікації.