Div Köşelerini Yuvarlaklaştırma

Div köşelerini yuvarlatalım...

Bu derste CSS3 ile gelen yeniliklerden biri olan köşe yuvarlatmayı anlatacağım arkadaşlar. Bunun için bir div oluşturuyoruz.


<div id="radus">###</div>



Css kodumuz da şu şekilde;


#radus {

    background-color: #000;

    height: 100px;

    width: 100px;

}



Şu anda elimizde 100x100'lük siyah bir kare oluştu.



Köşeleri yuvarlaklaştırmak için css'e şu kodları ekliyoruz.


border: 1px solid #000;  

    -moz-border-radius: 10px;  

    -webkit-border-radius: 10px;



Dikkat ettiyseniz yeni kodların yazımında tek tük değişiklikler var. Bu şekilde CSS'i düzenlediğimizde elimizde aşağıdaki gibi bir div oluşuyor.



Kolay gelsin...
  • Etiketler;
Eray Karayel
Bilgileri en kısa sürede eklenecektir.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

saollun ders icin
bu Internet Explorer da koseleri yuvarlak olmuyor bunu nasıl halledebiliriz ?
Bir kaç şey denedim ama sanırım bu köşeleri yuvarlama işi ie'de olmuyor. Bu ie'nin bir açığıdır diyebiliriz sanırım. Zaten bu tip nedenler yüzünden ie'yi sevmiyorum...
Te$ekkurler guzel olmus ie de olmuyor ama google chrome da oluyor devamini bekliyorum
KISA VE ÖZ
Bu özellik sanırım css3 özelliği ve henüz css3 browserlar tarafından tam olarak kabul görmediğinden bazı browserlarda sorun yaşanabiliyor. :sasir:
Aynen ie olmuyor ama firefoxda oluyor
ie 7.0'da bu özellik işlemez, 8'i bilmiyorum.:-dusun: ama istisnasız her browserda işe yarayan bi çözüm var, javascript jQuery kütüphanesi buna bi çözüm getirmiş. ayrıca arkaplanın transparent olmaması şartıyla farklı css teknikleriyle köşeler yuvarlaklaştırılabilir.
unut mayın css de tarayıcı farklılıkları vardır....paylaşan kişinin sorunu degildir o dikkatlerinize:kirp:
unut mayın css de tarayıcı farklılıkları vardır....paylaşan kişinin sorunu degildir o dikkatlerinize:kirp:
hocam şu yazı alanlarını yuvarlamayı nasıl yapıcaz biraz yeni olduğum içinn bilmiyorum da.
Moz- Özellik Sadece Yeni Browser (Tarayıcılarda) Geçerlidir. moz yerine kenar resimleri kullanarak köşeleri ovalleştirmek daha Olumlu Sonuçlar elde Edicektir.:kirp:
ie de olması için ne yapabiliriz cromede çalışıyor ie8 de çalışmıyor bu arada tşk ederim hocam
-webkit-border-radius: 10px; Bu kodu sadece IE 9-beta'da görütüleye bilirsiz. Tavsiyem İE 9 çıkmadan sitelerinize koymayın

Yukarı Git