CSS ile Yuvarlak Köşe Yapımı, Rounded Corners

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? :roll: İş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.

DÜZ YAZI
CSS:
  1. .yuvarlak{display:block}
  2. .yuvarlak *{
  3. display:block;
  4. height:1px;
  5. overflow:hidden;
  6. font-size:.01em;
  7. background:#FF0000}
  8. .yuvarlak1{
  9. margin-left:3px;
  10. margin-right:3px;
  11. padding-left:1px;
  12. padding-right:1px;
  13. border-left:1px solid #ff9191;
  14. border-right:1px solid #ff9191;
  15. background:#ff3f3f}
  16. .yuvarlak2{
  17. margin-left:1px;
  18. margin-right:1px;
  19. padding-right:1px;
  20. padding-left:1px;
  21. border-left:1px solid #ffe5e5;
  22. border-right:1px solid #ffe5e5;
  23. background:#ff3030}
  24. .yuvarlak3{
  25. margin-left:1px;
  26. margin-right:1px;
  27. border-left:1px solid #ff3030;
  28. border-right:1px solid #ff3030;}
  29. .yuvarlak4{
  30. border-left:1px solid #ff9191;
  31. border-right:1px solid #ff9191}
  32. .yuvarlak5{
  33. border-left:1px solid #ff3f3f;
  34. border-right:1px solid #ff3f3f}
  35. .yuvarlakfg{
  36. background:#FF0000;
  37. color:#FFFFFF;
  38. padding:0 6px;}

Daha sonra yuvarlak köşe yapmak için gerekli kod olan html kodunu da sayfamızdaki tagları arasına ekliyoruz.

DÜZ YAZI
HTML:
  1. <div><strong class="yuvarlak">
  2. <strong class="yuvarlak1"><strong></strong></strong>
  3. <strong class="yuvarlak2"><strong></strong></strong>
  4. <strong class="yuvarlak3"></strong>
  5. <strong class="yuvarlak4"></strong>
  6. <strong class="yuvarlak5"></strong></strong>
  7. <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>
  8. <strong class="yuvarlak">
  9. <strong class="yuvarlak5"></strong>
  10. <strong class="yuvarlak4"></strong>
  11. <strong class="yuvarlak3"></strong>
  12. <strong class="yuvarlak2"><strong></strong></strong>
  13. <strong class="yuvarlak1"><strong></strong></strong></strong>
  14.  
  15. </div>

Sonucu buradan canlı olarak görebilirsiniz: Yuvarlak Köşeli Kutucuklar

Bu Yazıyı Paylaşın

1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (Toplam 1 oy, ortalama: 5' de 5)
Loading ... Loading ...