Yükleniyor...

CSS Köşe Yuvarlama

Kutunun çevresine keskin bir kenarlık çizebiliyorsunuz. Çoğu zaman tasarım daha yumuşak köşeler ister — samimi kartlar, modern düğmeler, daire gibi okunan avatarlar. Bu border-radius: her köşenin ne kadar kavis aldığı.

border-radius ne yapar?

border-radius, kenarlık kutusunun köşelerini yuvarlar. Eğri kenarlık çizgisine ve arka plana uygulanır (ve genelde görsel/overflow kırpması da). Daha büyük uzunluk = daha yuvarlak köşe. Yaygın birimler: px veya %.

Tek değer — dört köşe

Günlük başlangıç: her köşe için bir uzunluk.

Her köşede aynı yarıçap

css
CSS Code 
.card {
border: 1px solid #cbd5e1;
border-radius: 12px;
padding: 1rem;
background-color: #ffffff;
}

Ne görmelisiniz?

Kenarlık eğriyi izler; beyaz dolgu yuvarlak şeklin içinde kalır. Yarıçap ikinci bir kenarlık değildir — mevcut kutuyu şekillendirir.

Kısayol: kaç değer?

Bir, iki, üç veya dört uzunluk verebilirsiniz. Köşe sırası sabittir.

📊 border-radius değer sayısı

Değer Anlam Günlük not
1 Dört köşe aynı Yumuşak kartlar ve paneller
2 Üst-sol + alt-sağ, sonra üst-sağ + alt-sol Çapraz eşleme
3 Üst-sol, üst-sağ + alt-sol, alt-sağ Daha az yaygın — varlığını bilin
4 Üst-sol, üst-sağ, alt-sağ, alt-sol Tam kontrol, üst-soldan saat yönü

Dört köşe, dört sayı

Her köşe kendi eğrisini istediğinde, dört değeri üst-soldan saat yönünde yazın.

Dört farklı köşe

css
CSS Code 
.badge {
border: 2px solid #0f766e;
border-radius: 16px 4px 16px 4px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}

İki değer — çapraz çiftler

İki uzunluk karşıt köşeleri eşler: ilki üst-sol ve alt-sağ; ikincisi üst-sağ ve alt-sol.

İki değerli çapraz yarıçap

css
CSS Code 
.tile {
border: 1px solid #94a3b8;
border-radius: 20px 4px;
padding: 1rem;
background-color: #f8fafc;
}

Hap düğmeler

Büyük bir yarıçap (çoğu zaman yüksekliğin yarısı veya 999px gibi büyük bir değer) dikdörtgeni hap/kapsül yapar — çipler ve birincil eylemler için yaygındır.

Hap şeklinde düğme

css
CSS Code 
.btn-pill {
border: none;
border-radius: 999px;
padding: 0.6rem 1.25rem;
background-color: #0f766e;
color: #ffffff;
}

Dairesel avatarlar

Gerçek bir daire için kutuya eşit genişlik ve yükseklik verin, sonra border-radius: 50%. Kare olmayan kutuda 50% elips yapar.

Yüzde 50 yarıçaplı daire

css
CSS Code 
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid #0f766e;
background-color: #ccfbf1;
overflow: hidden; /* fotoğrafı dairenin içinde keser */
}

Kendiniz deneyin

  1. Kenarlıklı bir kartı border-radius: 12px ile yumuşatın.
  2. Dört farklı köşe yarıçaplı bir rozet stilleyin.
  3. Bir döşemede iki değerli yarıçap kullanın ve çapraz eşlemeyi görün.
  4. border-radius: 999px ile hap düğme yapın.
  5. 64×64 avatarı border-radius: 50% ile yapın — sonra geniş dikdörtgende 50% deneyip karşılaştırın.

Yaygın hatalar

  • Boş, kenarlıksız, renksiz kutuya dev yarıçap koyup «neden bir şey görünmüyor» diye şaşmak
  • Geniş dikdörtgende 50% kullanıp mükemmel daire beklemek (elips alırsınız)
  • Daire isterken eşit genişlik/yüksekliği unutmak
  • border-radiusın borderın yerini aldığını sanmak — eğriyi net görmek için hâlâ kenarlık veya dolgu gerekir
  • Köşe sırasını karıştırmak (dört değer: üst-soldan saat yönü)

Özet

  • border-radius kutunun köşelerini yuvarlar
  • Tek değer hepsini yumuşatır; dört değer her köşeyi kontrol eder
  • İki değer karşıt köşeleri çapraz eşler
  • Büyük yarıçaplar hap yapar; karede 50% daire yapar
  • Eğri kenarlık ve arka planı birlikte keser
  • Kart, hap ve avatarı şekiller bariz olana kadar pratik edin

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Css Ders