▣ CSS Border Radius Generator

Build CSS border-radius shapes visually with independent corner controls. Preview any shape live and copy the CSS. Free online border-radius generator for web designers.

Top Left: 20px

Top Right: 20px

Bottom Left: 20px

Bottom Right: 20px

Lock all corners

Generated CSS

How to Use

Drag the sliders

Use the four corner sliders to set individual border-radius values. Toggle "All" to change all corners at once.

See the live preview

The box updates instantly to show the exact shape your radius values create.

Copy the CSS

Click Copy CSS to copy the border-radius property to your clipboard.

Frequently Asked Questions

What is CSS border-radius? +

border-radius rounds the corners of an element. A single value rounds all corners equally. You can specify each corner individually: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.

How do I make a perfect circle with CSS? +

Set border-radius: 50% on a square element (equal width and height). For example: width:100px; height:100px; border-radius:50%;

What is the shorthand order for border-radius? +

The shorthand follows clock order: top-left, top-right, bottom-right, bottom-left. So border-radius: 10px 20px 30px 40px applies 10px to top-left, 20px to top-right, 30px to bottom-right, 40px to bottom-left.

What are elliptical border radius values? +

You can create elliptical corners using the / separator: border-radius: 50px 50px 0 0 / 80px 80px 0 0 creates a semi-ellipse on top. This creates organic, pill, or teardrop shapes in CSS.

Can I use percentages for border-radius? +

Yes — percentage values are relative to the element width (horizontal) and height (vertical). border-radius: 50% makes a perfect circle on square elements and an ellipse on rectangular ones.

Tam Rehber: CSS Border Radius Oluşturucu

border-radius CSS özelliği, keskin köşeli dikdörtgenleri yuvarlatılmış köşeli şekillere dönüştürür. Tam sözdizimi ile elipsler, organik damla şekiller ve akıcı tasarım sistemi şekilleri oluşturulabilir.

Kısa Gösterim: 1-4 Değer

1 değer: Tüm köşeler — border-radius: 8px
2 değer: Sol-üst & sağ-alt, ardından sağ-üst & sol-alt
4 değer: Sol-üst, sağ-üst, sağ-alt, sol-alt (saat yönünde)

Eliptik Köşeler: x/y Sözdizimi

border-radius: 50px / 20px;

Bu, tüm köşelerde 50px yatay yarıçap ve 20px dikey yarıçap oluşturur; "yumurta" veya "stadyum" şekli verir.

Damla Şekiller: 8 Değer

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

Eğik çizgiden önceki değerler yatay yarıçaplardır, sonrakiler ise dikey yarıçaplardır. Bu değerleri @keyframes ile canlandırmak modern web tasarımında yaygın kullanılan bir morflama animasyonu yaratır.

Yüzde Değerleri ve Daire

Kare bir öğede border-radius: 50% mükemmel bir daire oluşturur. Bu teknik, avatar görüntüleri ve simge konteynerleri için standarttır.

Tasarım Sistemlerinde Akıcı Border Radius

--radius-full: 9999px kullanmak, pill şekilleri için 50%'den daha güvenilirdir; çünkü büyük bir piksel değeri, öğe boyutundan bağımsız olarak her zaman maksimum dairesel yay üretir.

Yuvarlak öğelere gölge ve derinlik eklemek için Box Shadow Oluşturucu'yu, eşleşen yuvarlatılmış köşelere sahip animasyonlu yükleme yer tutucuları için CSS Yükleyici'yi kullanın.