Köşe yarıçapı

border-radius ile köşeleri yuvarlatmayı öğrenirsin.

border-radius nedir?

border-radius bir kutunun köşelerini yuvarlatır. Değer bir yarıçaptır; ne kadar büyükse köşe o kadar yumuşak yuvarlanır. border-radius: 8px tipik bir kart için uygun, hafif yuvarlak bir görünüm verir.

Yarıçap, kutu kareyse çeyrek daire, dikdörtgense çeyrek elips çizer. Kenarlık yoksa yine de arka plan köşeleri yuvarlanır; yuvarlama kutunun tüm katmanlarını etkiler.

Dört köşe ayrı ayrı

border-radius tek değer aldığında dört köşeye aynı yarıçapı uygular. İki değer verirsen birinci üst-sol ve alt-sağ, ikinci üst-sağ ve alt-sol köşelere uygulanır.

Dört değer sırayla üst-sol, üst-sağ, alt-sağ, alt-sol köşeleridir. Ayrıca border-top-left-radius gibi tek köşe özellikleri de vardır; yalnızca bir köşeyi yuvarlamak istendiğinde işe yarar.

Uygulama Yuvarlak avatar yap

.avatar seçicisi için bir bildirim bloğu yaz. İçine border-radius: 50% bildirimini ekle. Yüzde değeri, kare bir görseli tam daireye çevirir.

Örnek çözümü göster

/* yuvarlak avatar */
.avatar {
  border-radius: 50%;
}

Kendini test et

border-radius: 8px; ne yapar?
- Kenarlık kalınlığını 8 piksel yapar
- Kenarlık rengini değiştirir
- İç boşluğu 8 piksel artırır
- Köşeleri 8 piksel yarıçapla yuvarlatır
Cevabı göster

Köşeleri 8 piksel yarıçapla yuvarlatır — Doğru. 8px köşelerin yarıçapıdır; ne kadar büyükse köşe o kadar yuvarlak olur.

Köşe yarıçapı özelliğini yaz

.box {
  ____: 12px;
}

Cevabı göster

.box {
  border-radius: 12px;
}

Yarıçap değerini görünüme eşle

0

Köşe sivri
8px

Hafif yuvarlak
50%

Tam daire

Sıradaki ders: Kutu gölgesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler