Ücretsiz Hesaplama
Tasarım ve RenkCSS Border Radius Oluşturucu
Köşe yuvarlama değerlerini görsel olarak ayarlayın ve 8 köşeli gelişmiş border-radius CSS kodunu tek tıkla kopyalayın.
Önizleme
CSS Kodu:
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
CSS Border Radius Oluşturucu
Web arayüzleri için köşeleri yuvarlatma, asimetrik kenarlık yarıçapı ve modern CSS3 border-radius kodu üretme rehberi.
1Nasıl Kullanılır?
- 1.Kutunun dört köşesi için (Sol-Üst, Sağ-Üst, Sağ-Alt, Sol-Alt) yuvarlama piksellerini kaydırıcılarla ayarlayın.
- 2.Canlı önizleme kutusundaki şekil değişimini anında izleyin.
- 3.Oluşan CSS kodunu ("border-radius: 12px 12px 0 0;") kopyalayarak stil dosyanıza yapıştırın.
2CSS3 Border Radius Sözdizimi
border-radius özelliği saat yönünde çalışır: Sol-Üst, Sağ-Üst, Sağ-Alt, Sol-Alt.
border-radius: [sol-üst] [sağ-üst] [sağ-alt] [sol-alt];
Tam Daire / Oval Yapma
Eşit genişlik ve yükseklikteki kare bir kutuya border-radius: 50% veya 9999px verildiğinde tam yuvarlak buton veya avatar elde edilir.
3Örnek CSS Kodu (Kart Üst Köşe Yuvarlama)
Altı düz, üstü yuvarlak bir modal pencere başlığı:
Sol Üst ve Sağ Üst16px
Sol Alt ve Sağ Alt0px
Üretilen CSS Koduborder-radius: 16px 16px 0 0;
💡 Sonuç Değerlendirmesi: Tasarımcı tek satır CSS koduyla modern kart arayüzünü oluşturur.
⚠️Dikkat Edilmesi Gereken Önemli Hususlar
- •Taşan içeriğin köşelerden dışarı çıkmaması için kapsayıcı div etiketine "overflow: hidden;" eklenmelidir.
Sıkça Sorulan Sorular (SSS)
Border-radius tarayıcı uyumluluğu nasıldır?
Tüm modern tarayıcılar (Chrome, Safari, Edge, Firefox) border-radius özelliğini herhangi bir ön ek (prefix) gerektirmeden %100 destekler.