Kutu köşelerini radius özelliği ile yuvarlak ve oval yapma

Border-radius özelliği ile oluşturduğumuz div kutularımızın köşelerini oval (yuvarlak) yapabiliriz. Tarayıcalarda farklı türde çalışır.


Opera ve Internet Explorer 9+ için 

.oval { border-radius:  border-radius:10px 10px 10px 10px; }


Chrome ve Safari için

.oval { -webkit-border-radius: 10px 10px 10px 10px; }


Firefox için

.oval { -moz-border-radius: 10px 10px 10px 10px; }

 

<style>
.oval{
    color:#600;
        font-size:20px;
    width:250px;
    height:30px;
    line-height:30px;
    text-align:center;
    border:1px solid #000;
    margin:2px;
    -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
    }
    </style>


<div class="oval">Border-Radius</div>

 

Programın Çıktısı

Border-Radius

Mesaj ve Yorumlar

Yorum Sayısı (0)

ÜYE YORUMLARI

Çevrimiçi :
15
Günlük :
84
Haftalık :
317
Aylık :
1106
Copyright © 2010 İşbara Alp Sönmez – Programlama Örnekleri. Her hakkı saklıdır. www.alpsonmez.com Bu sitedeki herhangi bir içeriğin, "herhangi bir sitede veya forumda" iznim dışında paylaşım yapılması durumunda hukuki dava açacağımı tarafınıza arz ederim. "Öğrenciler dilediği gibi kullanabilir."