DevToolPal
TR

CSS Border Radius Oluşturucu

CSS border-radius'u her köşe için ayrı ayarlayın; eliptik köşeler ve blob şekilleri dahil, px, % veya rem ile, canlı önizleme, hazır ayarlar ve kopyalanacak en kısa CSS.

Yerelde çalışır, asla yüklenmez

Köşeler

Birim

Önizleme

CSS

Hazır ayarlar
Border radius CSS
 
 
 
 
 
Ne yapar


Border radius oluşturucu, yuvarlatılmış köşeleri görsel olarak biçimlendirmenizi ve en kısa CSS’i kopyalamanızı sağlar. Tüm köşeler için tek bir yarıçap ya da her köşe için ayrı bir yarıçap kullanın, her köşeye ayrı yatay ve dikey yarıçap vermek için eliptik köşeleri açın ve sürüklerken önizlemenin değiştiğini izleyin. px, %, rem veya em ile çalışır; mevcut bir border-radius değerini düzenlemek için yapıştırabilirsiniz. Her şey tarayıcınızda çalışır.


Nasıl kullanılır


    

  1. Bir hazır ayardan başlayın ya da örnek şekli koruyun.
    2. 

  2. Birim seçin. Birim değiştirmek mevcut değerleri dönüştürür (rem ve em 16px sayılır, % önizleme kutusuna göredir).
    3. 

  3. Tek kaydırıcı için Tüm köşeler aynı yarıçap’ı açın; Sol üst, Sağ üst, Sağ alt ve Sol alt köşeleri ayrı ayarlamak için kapatın.
    4. 

  4. Her köşe için Yatay ve Dikey kaydırıcı almak üzere Eliptik köşeler’i açın.
    5. 

  5. Önizlemeyi Genişlik ve Yükseklik ile boyutlandırın, ardından kodu CSS kartından kopyalayın. Dört ayrı özellik tercih ederseniz longhand çıktısını açın.
    6. 



Örnek


.avatar { border-radius: 50%; }
.tab    { border-radius: 12px 12px 0 0; }
.blob   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }


Bilmekte fayda var


    

  • En kısa biçim. Çıktı eşit değerleri birleştirir: dört aynı köşe tek değer olur ve tüm köşeler dairesel olduğunda eğik çizgiden sonraki kısım atlanır.
    • 

  • Yüzdeler kutuya göredir. Yatay yüzdeler öğenin genişliğine, dikeyler yüksekliğine göre hesaplanır; bu yüzden dikdörtgende 50% daire değil elips verir.
    • 

  • Sığmayan yarıçaplar tarayıcı tarafından birlikte küçültülür; dev bir px değerinin temiz bir hap vermesinin nedeni budur.
    • 

  • Alt öğeler ve taşma. Yuvarlatılmış köşeler arka planı ve kenarlığı kırpar ama alt öğelerin içeriğini kırpmaz: kutudaki görselleri kırpmak için overflow: hidden ekleyin.
    • 

 
  
 
SSS
 
 
  › border-radius'taki eğik çizgi ne anlama gelir?  
Çizgiden önceki değerler yatay yarıçaplar, sonrakiler dikey yarıçaplardır. Farklı olduklarında köşe daire yerine elipsin dörtte biri olur. Örneğin 50% / 30%, 50%'den daha basık bir eğri verir.
 
  › Dört köşe hangi sırayla yazılır?  
Sol üstten başlayarak saat yönünde: sol üst, sağ üst, sağ alt, sol alt. Daha az değer verilirse CSS bunları tekrarlar: iki değer sol üst/sağ alt ve sağ üst/sol alt köşeleri, üç değer sol üst, sağ üst/sol alt ve sağ alt köşeleri ayarlar.
 
  › Daire veya hap şekli nasıl yapılır?  
border-radius: 50% kareyi daireye, dikdörtgeni elipse çevirir. Her genişlikte uçları yuvarlak bir hap için 9999px gibi çok büyük bir uzunluk kullanın: tarayıcı sığmayan yarıçapları küçültür, böylece uçlar kusursuz yuvarlak kalır.
 
  › Blob şekilleri nasıl yapılır?  
Blob'lar sekiz farklı yüzde kullanır: dört yatay ve dört dikey yarıçap, örneğin 30% 70% 70% 30% / 30% 30% 70% 70%. Bir blob hazır ayarı seçin, Eliptik köşeler'i açın ve şekli değiştirmek için her köşenin kaydırıcısını sürükleyin.