3 Ekim 2008 
ErhanK 
Yuvarlak köşeli kutucuklar, normal dikdörtgen şeklindeki kutucuklardan daha estetik görünür. Daha estetiği varken neden takoz olanını kullanasınız ki değil mi? 
İşte bu kodlarla herhangi bir resim kullanmadan kendi yuvarlak köşeli kutucuklarımızı yapacağız.
İlk olarak aşağıdaki CSS kodlarımız bulunuyor. Bu kodları kendi stil dosyamıza ekliyoruz.
CSS:
-
.yuvarlak{display:block}
-
.yuvarlak *{
-
display:block;
-
height:1px;
-
overflow:hidden;
-
font-size:.01em;
-
background:#FF0000}
-
.yuvarlak1{
-
margin-left:3px;
-
margin-right:3px;
-
padding-left:1px;
-
padding-right:1px;
-
border-left:1px solid #ff9191;
-
border-right:1px solid #ff9191;
-
background:#ff3f3f}
-
.yuvarlak2{
-
margin-left:1px;
-
margin-right:1px;
-
padding-right:1px;
-
padding-left:1px;
-
border-left:1px solid #ffe5e5;
-
border-right:1px solid #ffe5e5;
-
background:#ff3030}
-
.yuvarlak3{
-
margin-left:1px;
-
margin-right:1px;
-
border-left:1px solid #ff3030;
-
border-right:1px solid #ff3030;}
-
.yuvarlak4{
-
border-left:1px solid #ff9191;
-
border-right:1px solid #ff9191}
-
.yuvarlak5{
-
border-left:1px solid #ff3f3f;
-
border-right:1px solid #ff3f3f}
-
.yuvarlakfg{
-
background:#FF0000;
-
color:#FFFFFF;
-
padding:0 6px;}
Daha sonra yuvarlak köşe yapmak için gerekli kod olan html kodunu da sayfamızdaki tagları arasına ekliyoruz.
HTML:
-
<strong class="yuvarlak3"></strong>
-
<strong class="yuvarlak4"></strong>
-
<div class="yuvarlakfg">CSSim Benim yuvarlak köşe denemesi, css örneği. CSSim Benim yuvarlak köşe denemesi, css örneği. CSSim Benim yuvarlak köşe denemesi, css örneği. CSSim Benim yuvarlak köşe denemesi, css örneği. CSSim</div>
-
<strong class="yuvarlak">
-
<strong class="yuvarlak5"></strong>
-
<strong class="yuvarlak4"></strong>
-
<strong class="yuvarlak3"></strong>
-
-
</div>
Sonucu buradan canlı olarak görebilirsiniz: Yuvarlak Köşeli Kutucuklar
Kategori: 
Etiketler:
[...] yapmak için genelde resim destekli metodlar kullanırdık. Fakat CSS’im Benim blogundaki CSS ile Resimsiz Yuvarlak Köşeler başlıklı yazıyı okuyunca sevindim. Burada hiç bir grafik kullanmadan salt css ile yuvarlak [...]
Gerçekten grafik kullanmadan oval kenarlık yapmakla ilgili bir makaleyi ilk burada okudum. Eline sağlık.
css ile cerceve süs buton hersey yapabilirsiniz tabi türkler bu konulari bilmedikleri icin ilginc geliyor alismislar hep ordan burdan calip kod yapistirip site yaptiklarini sandiklari icin burda okuyan vatandasa tuhaf geliyordur:=))
Gerçekten çok güzel bir yazı.Ama çok fazla kod var.Tarayıcılar css 3 e geçerse işimiz çok kolaylaşacak.Tebrik ederim.Teşekkürler.
Bu yazı çok yararlı olmuş, Teşekkür ederim fakat yorumlarda kerim adlı dallamanın teki Türkleri geri zekalı varlıklar olarak görmüş, her şeyi çalıp çırparak yaptığımızı söylemiş, bu yüzden bu dallamanın beyin özürlü olduğu kanaatine varıyorum, eğer isterse türklerin kendi has becerisiyle yabancıların bile yapamadığı onlarca örnek site gösterebilirim.
bence en iyisi resim çünkü hem koddan fazla bir şekilde tasarruf yapıyorsunuz ben asp.net bilmeme rağmen css min çok iyi olmasına rağmen böylle yapmayı çok sakıncalı buluyorum resim daha güzel durur amam bunun içinde resim bilginizin daha çok olması lazım birde css’de tıklaı kalrısınız ama ersimde hayallarinizi bile çizersiniz
@ahmethakan bence sen sus.. ;-) İnanıyoruz ki ( ? ) hatta eminim, dediklerinizi yaparsınız..
Teşekkür ederiz, güzelmiş.
teşekürler güzel olmuş. başarılı buldum