Генератор на закръглени ъгли (border-radius)

Как да използвате генератора на закръглени ъгли

1. Плъзнете точките по ръбовете на прегледа. Всяка цветна точка задава хоризонталния радиус на един ъгъл; при отметнато Елиптични ъгли (8 стойности) белите точки задават вертикалните радиуси.
2. Или въведете точни стойности в Ъгли: Горе вляво, Горе вдясно, Долу вдясно и Долу вляво, всеки с поле Хоризонтален и поле Вертикален.
3. Изберете Мерна единица: % (процент от блока) или px (пиксели). При превключване текущите стойности се преобразуват, така че формата остава същата.
4. Задайте Ширина на блока (px) и Височина на блока (px), за да съответстват на вашия елемент, и използвайте Всички ъгли, за да закръглите всички ъгли наведнъж.
5. Опитайте Готови форми (Заоблена, Хапче, Кръг, Листо, Капка, Яйце, Билет и три блоба) или щракнете върху Случаен блоб за органична форма.
6. Отметнете Отделни свойства, ако предпочитате четирите декларации border-*-radius, и после копирайте CSS код с бутона Копирай.

Клавиатура: фокусирайте точка и натиснете стрелките, за да промените радиуса ѝ с една стъпка (10 със Shift).

Инструментът работи във вашия браузър. Нищо от въведеното не се изпраща към сървър.

Синтаксисът на border-radius

border-radius приема от една до четири стойности в ред: горе вляво, горе вдясно, долу вдясно, долу вляво. Както при отстъпите, липсващите стойности се вземат от срещуположния ъгъл: border-radius: 10px 20px закръгля горния ляв и долния десен ъгъл с 10px, а другите два с 20px. Инструментът винаги записва най-краткия равностоен вариант.

Всеки ъгъл всъщност е четвърт елипса с два радиуса. Наклонена черта отделя хоризонталните радиуси от вертикалните, което дава до осем стойности:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Преди чертата са хоризонталните радиуси на четирите ъгъла, след нея са вертикалните. Когато двата списъка са еднакви, частта след чертата се пропуска.

Пиксели или проценти?

• px дава една и съща крива, независимо от размера на елемента. Това е правилният избор за бутони, карти и полета за въвеждане: border-radius: 8px.
• % е спрямо елемента: хоризонталните радиуси спрямо ширината му, вертикалните спрямо височината. 50% превръща квадрат в кръг, а правоъгълник в елипса. Процентите са това, което кара блоб формите да се мащабират заедно с елемента.

За бутон във формата на хапче използвайте радиус в пиксели поне наполовина от височината. Формата Хапче прави точно това за въведения от вас размер на блока; работи и огромна стойност като 999px.

Когато съседни радиуси в сбор надвишават общата им страна, браузърите намаляват пропорционално всички радиуси, докато се поберат. Затова плъзгането на две точки една през друга не разваля формата.

Блоб форми

Блоб формите и Случаен блоб използват осем процента, при които двете точки на всяка страна дават сбор 100%. Тогава кривите се срещат точно и формата изглежда като гладко камъче. Анимирайте преход между два блоба с CSS transition върху border-radius за ефект на „преливане“.