CSS3 Border Radius ile Yuvarlak (Oval) Köşeler

Yuvarlak veya oval köşeli butonlar, resimler, alanlar oluşturmak için imajlara ihtiyacınız yok. Div kenarlarını, köşelerini, tabloları yuvarlak yapabilmenin en pratik yolu CSS. CSS3 ile bir resmin köşesini bile yuvarlak yapabilirsiniz. Aşağıdaki kodlar Google Chrome, Mozilla Firefox, Internet Explorer, Safafri ve Opera gibi birçok tarayıcıda destekleniyor artık. Border-radius kullanarak hazırlanan yuvarlak köşeler ile ilgili aşağıda birkaç örnek bulabilirsiniz. Bu örnekleri kendi tasarımlarınıza göre düzenleyerek kullanabilirsiniz.

CSS border-radius

Dört köşeyi de yuvarlatmak için aşağıdaki kodlar kullanılır.

.round1 {
-moz-border-radius: 20px; 
-webkit-border-radius: 20px; 
border-radius: 20px;
}

Yalnızca sol üst ve sağ alt yuvarlak olsun diyorsanız aşağıdaki kodlar kullanılır.

.round2 {
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
border-top-left-radius: 20px;

-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
border-bottom-right-radius: 20px;
}

Genel mantık, eğer dört köşeyi aynı anda aynı değerde yuvarlatmak yerine, köşeye özel css uygulayabiliyoruz. Sol tarafı köşeli bırakıp sağ tarafı yuvarlaklaştırmak da mümkün.

.round3 {
-webkit-border-top-left-radius: 0px;
-khtml-border-radius-topleft: 0px;  
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;

-webkit-border-top-right-radius: 90px;
-khtml-border-radius-topright: 90px;
-moz-border-radius-topright: 90px;
border-top-right-radius: 90px;

-webkit-border-bottom-left-radius: 0px;
-khtml-border-radius-bottomleft: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;

-webkit-border-bottom-right-radius: 90px;
-khtml-border-radius-bottomright: 90px;
-moz-border-radius-bottomright: 90px;
border-bottom-right-radius: 90px;
}

Görüldüğü gibi spesifik bir köşeye yuvarlak uygulamak istediğiniz zaman border-top-left-radius, border-top-right-radius, border-bottom-left-radius ve border-bottom-rigt-radius değerlerini kullanıyoruz.

Bu kodlar dışında internette online olarak yuvarlak köşe oluşturma siteleri bulunuyor. Bunlardan biri border-radius.com. Bu sitede gireceğiniz değerler ile bir div ya da resminizin köşelerini yuvarlak yapmanın kodlarını otomatik olarak alabilirsiniz.

CSS ile Resmi Yuvarlak Yapma

Web sitenize koyduğunuz bir imajı ya da bir avatarı yuvarlak yapmak isterseniz, bunu Photoshop’a ihtiyaç olmadan CSS ile yapmanız mümkün. Bir alanı CSS ile yuvarlak yapmak için yine yukarıdaki kodlardaki mantıkta ilerlememiz gerekiyor. Örneğin bir profil imajını yuvarlak yapacağımızı düşünelim.

<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" class="avatar" data-src="avatar.jpg" alt="Avatar" title="Css3 Border Radius Ile Yuvarlak (Oval) Köşeler 1">

Bu görseli yuvarlak yapmak için aşağıdaki kodu style.css dosyasına yerleştirmemiz yeterli.

.avatar {border-radius: 100px;}

border-radius değerini yuvarlak olarak belirlememiz için dikkat etmemiz gereken şey, alanın genişliği 200px ise yuvarlak olması için yarısı değerinde piksel değeri girmemiz gerektiği. 200px çapı olan bir alanın yuvarlak olması için border-radius değeri 100px olmalı.

Popular Eğitimler

CSS Carousel Logo Slider Efekti

Herhangi bir Java Script kodu kullanmadan, sadece CSS kullanarak HTML ve CSS…

jQuery ve DrawSVG ile Hareketli SVG İkon Kullanımı

Web sitenizde hareketli SVG (animated SVG) kullanımı nasıl yapılır? Web sitelerinde göze…

Web Sitesine PDF Dosyası Nasıl Yerleştirilir?

HTML sayfalara PDF dosyası nasıl yerleştirilir? PDF dosyasını sayfada göstermek, yayınlamak, embed edilmesi nasıl sağlanır?

jQuery Owl Carousel Gelişmiş Responsive Slider Kullanımı

Mobil cihazlarla uyumlu, responsive ve WordPress sitenize entegre edebileceğiniz bir slider arıyorsanız,…

Tüm Tarayıcılarla Uyumlu Smooth Scrolling

Ekrana sığmayan uzun web sayfalarında, anchor linklere tıklandığında Smooth Scrolling denilen yumuşak…

Web Sitesine Dark Mode / Gece Modu Nasıl Eklenir?

Karanlık modlar göz yormayan görünümüyle hayatımızın her alanına giriyor. YouTube, Whatsapp, Android,…