Інструмент для розробників

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

Задайте кожен кут і скопіюйте CSS.

Генератор border-radius Працює на вашому пристрої

Працює у вашому браузері — ваш текст нікуди не надсилається
Без реєстрації та квот, безкоштовно користуйтеся скільки завгодно

Як це працює

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

Порядок — раз і назавжди

Лівий верхній, правий верхній, правий нижній, лівий нижній — за годинниковою стрілкою, починаючи з лівого верхнього кута. Той самий порядок за годинниковою стрілкою від лівого верхнього кута діє і для скорочених записів margin, padding і border, що варто запам'ятати раз і назавжди.

Пікселі чи відсотки

Пікселі дають однакову кривизну незалежно від розміру елемента. Відсотки відраховуються від власної ширини й висоти елемента, тож кривизна масштабується — а радіус 50% на квадраті дає ідеальне коло, що є стандартним прийомом для круглих аватарів.

Форма пілюлі

Радіус, більший за половину висоти елемента, обмежується точно половиною, тому border-radius: 999px надійно створює пілюлю за будь-якої висоти. Це надійніше, ніж обчислювати правильне значення, бо воно продовжує працювати, коли вміст змінюється.

Коли кути виглядають неправильно у вкладених елементах

Закруглений блок усередині іншого закругленого блока потребує меншого радіуса для внутрішнього, зменшеного на відступ між ними, інакше криві не будуть концентричними. Це дрібна деталь, яка робить картки справді охайними.

Запитання й відповіді