Css Border Radius Oval Köşe Oluşturma

css 3 ile resim kullanmadan sadece css kodları kullanarak arka planlarınızın köşelerini border radius kullanarak ovalleştirebilir sitenizin görünümünü dahada zenginleştirebilirisiniz.

#kenar1 {width:90px;
                height:30px;
                              border-radius: 10px;
                           background: olive;
}

#kenar2 {width:90px;
                 height:30px;
                                border-radius: 10px;
                                   border: 3px solid blue;
}

 #kenar3 {width:70px;
                 height:70px;
                                             border-radius: 5px 20px 5px;
                           background: silver;
}
#kenar4 {width:70px;
                height:70px;
                                       border-radius: 10px 30px;
                          background: orange;
}

Kenar 1:

Kenar 2

Bu iki örnekte görüldüğü gibi bütün köşeler oval bir görünüm almıştır.Css ile köşeleri oval yapmadaki tek husus border radius kodu ' dur.

Kenar 3

Kenar 4

Mesela sadece sol üst tarafı ovalleştirmek isterseniz ; border-radius-top-left yada sadece sol alt tarafı ovalleştirmek isterseniz ; border-bottom-left-radius gibi kodları kullarak zenginleştirebilirsiniz.