CSS oval köşeler: Border Radius

Daha önce paylaşmış olduğumuz CSS3 kodlarına ek olarak günümüz web sitelerinde en çok kullanılan css kodlarından birisi olan oval yani yuvarlak köşe ekleme aracını sizlerle paylaşıyoruz. Oval köşeli css kodu sizin için eklediğiniz kutu ve görsellerin üzerine ovallik eklemenizi yani köşelerini yuvarlak bir hale getirmenize olanak tanır.

Oval köşeler yani yuvarlak kenarlar olarak kullandığımız border radius nasıl kullanacak diye soracak olursak verdiğimiz değer üzerinden ve belli bir köşe seçildiyse o köşe üzerinden ovallik vermemizi sağlar. Aşağıdaki tüm alanların 10 px değerinde oval olduğu kodu bulabilirsiniz.

CSS Border Radius

.oval
{
border-radius: 10px;
}

Bunun dışında tüm köşelerin değil de belirli köşelerin oval olmasını sağlamak için de köşeleri belirtebileceğiniz şekilde CSS 3 kodu oluşturabilirsiniz. Örneğin aşağıdaki kodlarla border radius ekleyeceğimiz içeriğin sağ üst köşesi ve sol alt köşesini 10px değerinde oval hale getirmiş olduk.

.oval2
{
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
}

Bu şekilde CSS kodlamanızda dilediğiniz içeriğe ovallik kazandırabilirsiniz.  Yine CSS3 ile gelen yenilik olan CSS Shadow yani gölge ekleme içeriğimizi de inceleyebilirsiniz.