Div Oval Kenar

Tasarımda Div için oval kenar gerektiğinde kullanılması gereken bir kodumuz var 🙂 Yeni tarayıcılar sonuna kadar desteklerken eski tarayıcılar için bu özelliği kullanmak istersen javascript kullanmak zorunda kalacaksın.

Biz şimdilik sadece Div oval kenar yapmak için gerekli olan CSS kodunu konuşalım.


-moz-border-radius: 5px; // Mozilla için ovalleştirme
-webkit-border-radius: 5px; // chrome için ovalleştirme
border-radius: 5px; // İnternet Explorer için ovalleştirme


Bir de şöyle bir örnek var. Örneği şu şekilde açıklayabiliriz istediğiniz kenara ovallik vermek istiyorsanız aşağıdaki gibi bir kod kullanmanız gerekecek.

div#kutu{
width: 400px;
padding: 20px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
background: #F00;
white-space:pre
}


Yardımlarından faydalandığımız Fatih Bey‘e de sonsuz teşekkürlerimi sunuyorum.

27 Ekim 2014