Border Radius Önizleyici
CSS border-radius değerlerini kaydırıcılar, hazır şablonlar ve canlı önizleme ile görsel olarak düzenleyin — tek tıkla CSS kopyalayın
border-radius: 20px;Şablonlar
Renk
Genişlik
Yükseklik
Border Radius Önizleyici
CSS border-radius değerlerini kaydırıcılar, hazır şablonlar ve canlı önizleme ile görsel olarak düzenleyin — tek tıkla CSS kopyalayın
Özellikler
- Live preview of `border-radius` with per-corner controls (TL / TR / BR / BL)
- Eight named presets (rounded, pill, leaf, blob, ticket, etc.)
- Output as CSS shorthand: `border-radius: 10px 20px 5px 15px;` or single value if all corners match
- Elliptical corners (the slash syntax `40px / 20px`) are not directly editable in this UI — set all four corners equal for symmetric output
- Copy the CSS line to clipboard with one click
Nasıl Kullanılır
- Her köşeyi ayarlamak için kaydırıcıları sürükleyin.
- Veya hızlı şekiller için bir şablona tıklayın.
- Oluşturulan CSS özelliğini kopyalayın.
İpuçları ve En İyi Uygulamalar
- Single value (e.g. `border-radius: 8px`) applies to all four corners — the most common case.
- Four-value shorthand goes TL / TR / BR / BL (clockwise from top-left).
- Elliptical corners (`Xpx Ypx / Xpx Ypx`) give a "leaf" or asymmetric shape — supported in CSS but not exposed in this UI.
- For animated radius changes, transition `border-radius` directly — the property is animatable.
- Mobile / iOS Safari: corner radius up to ~50% of the smaller side renders as a perfect circle (`border-radius: 50%`).
SSS
border-radius nedir?
CSS border-radius bir öğenin köşelerini yuvarlar. Tüm köşeleri eşit olarak ayarlayabilir veya her birini bağımsız olarak kontrol edebilirsiniz.
% mi px mi kullanmalıyım?
Sabit yuvarlama için px kullanın. Öğe boyutuna göre şekiller için % kullanın — kare bir öğede %50 bir daire oluşturur.