DevToolPal
UK

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

Налаштовуйте CSS border-radius для кожного кута, зокрема еліптичні кути та форми-плями, у px, % або rem, з живим переглядом, шаблонами й найкоротшим CSS для копіювання.

Працює локально, нічого не завантажується на сервер

Кути

Одиниця

Перегляд

CSS

Шаблони
CSS заокруглення
 
 
 
 
 
Що робить інструмент


Генератор border-radius дає змогу налаштовувати заокруглення візуально й копіювати найкоротший CSS. Задайте один радіус для всіх кутів або окремий для кожного, увімкніть еліптичні кути, щоб кожен кут мав окремий горизонтальний і вертикальний радіус, і дивіться, як змінюється перегляд під час перетягування. Підтримуються px, %, rem і em; можна вставити наявне значення border-radius і редагувати його. Усе працює у вашому браузері.


Як користуватися


    

  1. Почніть із шаблону або залиште приклад.
    2. 

  2. Виберіть Одиницю. Під час зміни одиниці поточні значення перераховуються (rem і em — 16px, % — відносно блока перегляду).
    3. 

  3. Увімкніть Однаковий радіус для всіх кутів, щоб керувати одним повзунком, або вимкніть, щоб задати Лівий верхній, Правий верхній, Правий нижній і Лівий нижній окремо.
    4. 

  4. Увімкніть Еліптичні кути — у кожного кута з’являться повзунки По горизонталі й По вертикалі.
    5. 

  5. Змініть розмір перегляду через Ширину й Висоту та скопіюйте код із картки CSS. Увімкніть виведення повних властивостей, якщо потрібні чотири окремі властивості.
    6. 



Приклад


.avatar { border-radius: 50%; }
.tab    { border-radius: 12px 12px 0 0; }
.blob   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }


Корисно знати


    

  • Найкоротший запис. Однакові значення об’єднуються: чотири рівні кути дають одне значення, а частина після риски опускається, якщо всі кути колові.
    • 

  • Відсотки залежать від блока. Горизонтальні відсотки рахуються від ширини елемента, вертикальні — від висоти, тому 50% у прямокутника дають еліпс, а не коло.
    • 

  • Радіуси, що не вміщуються, браузер зменшує разом — тому величезне значення в px дає охайну «пігулку».
    • 

  • Дочірні елементи й переповнення. Заокруглення обрізає тло й рамку, але не вміст дочірніх елементів: додайте overflow: hidden, щоб обрізати зображення всередині блока.
    • 

 
  
 
Часті запитання
 
 
  › Що означає скісна риска в border-radius?  
Значення до риски — горизонтальні радіуси, після — вертикальні. Якщо вони різні, кут стає чвертю еліпса, а не кола. Наприклад, 50% / 30% дає більш пласку дугу, ніж 50%.
 
  › У якому порядку записують чотири кути?  
За годинниковою стрілкою від лівого верхнього: лівий верхній, правий верхній, правий нижній, лівий нижній. Якщо значень менше, CSS повторює їх: два значення задають лівий верхній/правий нижній і правий верхній/лівий нижній, три — лівий верхній, правий верхній/лівий нижній і правий нижній.
 
  › Як зробити коло або «пігулку»?  
border-radius: 50% перетворює квадрат на коло, а прямокутник — на еліпс. Для «пігулки» з круглими кінцями за будь-якої ширини використайте дуже велику довжину, як-от 9999px: браузер зменшує радіуси, що не вміщуються, тож кінці лишаються ідеально круглими.
 
  › Як роблять форми-плями (blob)?  
Плями використовують вісім різних відсотків: чотири горизонтальні й чотири вертикальні радіуси, наприклад 30% 70% 70% 30% / 30% 30% 70% 70%. Виберіть шаблон плями, увімкніть «Еліптичні кути» й змінюйте форму повзунками кутів.