Визуално създавайте CSS border-radius с преглед на живо и копирайте готов за продукция код.

Преглед Плъзнете ъгловите манипулатори
CSS
border-radius: ;

100% поверително — всичко работи във вашия браузър. Нищо не се качва.

Всички ъгли
px
px
Елемент
Шаблони

За Генератор на CSS Border Radius

Генераторът на CSS border radius създава всичко от меко заоблени карти до органични форми на капки. Плъзнете дръжките на ъглите директно върху прегледа или задайте всеки ъгъл числово — включително пълния синтаксис от осем стойности, при който всеки ъгъл има отделни хоризонтален и вертикален радиус. Тази втора ос е тази, която отключва яйца, листа, сълзи и капки.

Превключвател за свързване на ъглите поддържа всичките четири ъгъла синхронизирани за класическо еднакво заобляне, докато разкачването им освобождава всеки ъгъл за асиметрични форми. Дванадесет готови настройки — заоблена, хапче, кръг, скругленка, две капки, лист, яйце, арка, сълза, венче и вълна — демонстрират какво може свойството, а бутон за разбъркване генерира свежи органични форми безкрайно.

Можете да смените мерната единица, да прецветите елемента и платното, за да съответстват на дизайна ви, и да копирате или чистата стойност на border-radius, или пълно CSS правило. Инструментът е 100% на страна на клиента — нищо не се качва.

Как да използвате Генератор на CSS Border Radius

  1. Плъзнете дръжките на ъглите върху прегледа или изключете „Свържи всички ъгли“, за да редактирате всеки ъгъл поотделно.
  2. Задайте хоризонталния и вертикалния радиус за всеки ъгъл за органични форми, подобни на капки.
  3. Изберете мерна единица и коригирайте цветовете на елемента и фона, за да прегледате в контекст.
  4. Опитайте готовите настройки — хапче, скругленка, капка, лист, сълза и други — или натиснете разбъркване.
  5. Копирайте стойността на border-radius или пълния CSS.

Често задавани въпроси

Стойностите преди наклонената черта са хоризонталните радиуси на четирите ъгъла; стойностите след нея са вертикалните радиуси. Разликата между двете оси по ъгъл е това, което превръща обикновена заоблена кутия в яйце, лист или капка.

За кръг използвайте квадратен елемент с border-radius: 50%. За хапче дайте на всеки правоъгълник радиус поне половината от височината му — готовите настройки за кръг и хапче настройват и двете мигновено.

Да — border-radius изрязва кутията на елемента, включително фонови изображения, а overflow: hidden разширява изрязването до дъщерното съдържание. Прилагането на радиус на капка към img елемент е бърз начин да получите органични фотомаски.

Да, border-radius интерполира плавно с CSS преходи, когато и двете състояния имат съвместими единици. Анимирането между две стойности на капка при hover е популярен ефект на органично морфиране — генерирайте и двете състояния тук и направете преход между тях.

Да, напълно безплатен и поверителен: работи само във вашия браузър, без акаунт и без изпращане на данни никъде.

Сподели

Популярни търсения
генератор на css border radius генератор на border radius генератор на нестандартен border radius генератор на заоблени ъгли в css онлайн инструмент за border radius css генератор на елиптичен border radius генератор на css blob форми инструмент за преглед на border radius
Нуждаете се от помощ?
Открихте проблем с този инструмент? Кажете ни.
Докладване на проблем

Добавете този безплатен инструмент към собствения си уебсайт — копирайте и поставете кода по-долу.