Робота з властивістю CSS border-radius
Властивість border-radius у CSS визначає, наскільки сильно заокруглюються кути елемента. Цей інструмент дозволяє керувати формою кутів за допомогою інтерактивних повзунків, миттєво генеруючи готовий код для веб-дизайну. Початкове значення повзунка встановлено на 24, що дає результат border-radius: 24px;.
Кожен кут відмальовується прямо у вашому браузері. Жодні налаштування не завантажуються на BroBroGo.
Керування кутами та одиниці виміру
Генератор дозволяє налаштовувати кути індивідуально або зв'язувати їх разом. Чотири повзунки кутів відповідають за годинниковою стрілкою за верхній лівий, верхній правий, нижній правий та нижній лівий кути.
Для налаштування доступні такі елементи керування:
- Зв’язати всі кути: коли цей перемикач увімкнено, один повзунок з міткою «Усі кути» керує всіма чотирма кутами одночасно.
- Розв'язані кути: коли перемикач вимкнено, з'являються чотири окремі повзунки: «Верхній лівий», «Верхній правий», «Нижній правий» та «Нижній лівий». Діапазон регулювання для кожного повзунка становить від 0 до 100.
- Одиниця: перемикач дозволяє вибрати одиниці виміру між «px» (пікселі) та «%» (відсотки).
Вибір одиниці виміру принципово змінює поведінку заокруглення:
- Пікселі (px): кут заокруглюється на фіксовану величину. Радіус залишається незмінним незалежно від розміру самого елемента.
- Відсотки (%): кут заокруглюється відносно розмірів блоку. Горизонтальний відсоток розраховується відносно ширини елемента, а вертикальний — відносно його висоти. Якщо встановити всі кути на 50% для квадратного елемента, він перетвориться на коло.
Еліптичний режим для складних форм
Коли перемикач «Еліптичні кути» вимкнено, кожен кут є чвертю кола з єдиним радіусом. Увімкнення цього режиму активує еліптичне заокруглення, де кожен кут отримує окремий горизонтальний та вертикальний радіуси. Для кожного кута з'являються додаткові повзунки «Горизонтально» та «Вертикально».
Це дозволяє створювати м’які, асиметричні та органічні форми. З точки зору CSS-коду, у звичайному режимі генератор використовує коротку форму запису. В еліптичному режимі синтаксис змінюється: генератор автоматично запише для вас значення через скісну риску (slash), яка розділяє горизонтальні та вертикальні радіуси, і повернеться до короткої форми, щойно кути знову стануть круглими.
Використання шаблонів швидкого налаштування
Для прискорення роботи в інструменті передбачено розділ «Шаблони» з готовими пресетами:
- Гострий: скидає радіус усіх кутів до 0.
- Заокруглений: встановлює стандартне м'яке заокруглення кутів.
- Коло: встановлює значення всіх кутів на 50%.
- Пляма: створює асиметричну органічну форму за допомогою еліптичних кутів.
- Листок: створює симетричну форму з гострими та заокругленими протилежними кутами.
Після налаштування форми у вікні попереднього перегляду відображається візуальний результат. Під заголовком «CSS» генерується готовий код, який можна скопіювати в один клік за допомогою кнопки «Копіювати CSS».
Часті запитання
Як працюють чотири кути та різниця між px і %? Чотири повзунки відповідають за годинниковою стрілкою за верхній лівий, верхній правий, нижній правий та нижній лівий кути. У пікселях кут заокруглюється на фіксовану величину; у відсотках — відносно розмірів блоку (горизонтальний відсоток залежить від ширини, а вертикальний — від висоти, тому 50% перетворюють квадрат на коло).
Що робить еліптичний режим? Якщо цей режим вимкнено, кожен кут є чвертю кола з єдиним радіусом. Увімкніть його, і кожен кут отримає окремий горизонтальний та вертикальний радіуси — саме так створюються м’які, органічні форми «плям» (blobs). Генератор автоматично запише для вас значення через скісну риску (slash) і повернеться до короткої форми, щойно кути знову стануть круглими.
Як зробити ідеальне коло чи кнопку-пігулку? Зв’яжіть кути, перемкніться на відсотки та встановіть 50%: квадрат перетвориться на коло. Для кнопкоподібної форми (пігулки) залиште пікселі та перетягніть кутовий повзунок за межі половини висоти кнопки — сторони залишаться повністю заокругленими за будь-якої ширини. Пресет «Коло» налаштовує перший варіант в один клік.