CSS3: Border - Radius

CSS3: Border - RadiusBorder-Radius adalah salah satu bagian dari CSS3 yang sangat sering saya gunakan, karena dengan border-radius kita dapat membuat suatu sudut menjadi melengkung. Contohnya sudah pernah saya praktekkan pada "Tutorial - Round Menu With CSS3 (Menu Bulat)".

Berikut cara menggunakan border-radius:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
-o-border-radius:10px;

-moz-border-radius: 25px 0px 25px 0px;
-webkit-border-radius: 25px 0px 25px 0px;
-khtml-border-radius: 25px 0px 25px 0px;
border-radius: 25px 0px 25px 0px;;
-o-border-radius:25px 0px 25px 0px;

-moz-border-radius: 10px 30px 10px 25px;
-webkit-border-radius: 10px 30px 10px 25px;
-khtml-border-radius: 10px 30px 10px 25px;
border-radius: 10px 30px 10px 25px;
-o-border-radius:10px 30px 10px 25px;

Keterangan:
-moz-border-radius digunakan untuk mozilla firefox;
-webkit-border-radius digunakan untuk chrome dan safari;
-khtml-border-radius digunakan untuk browser lama yang mendukung border-radius;
border-radius digunakan untuk browser baru yang mungkin mendukung border-radius;
-o-border-radius digunakan untuk opera.
Silahkan dikembangkan sesuai dengan selera anda!

16 komentar:

Yosh Gangga mengatakan...

Nice blog dan Informatif blog yang bagus untuk menambah pengetahuan. keep bloging semoga tambah sukses amin. yang suka liburan mampir ya ke http://7og4nk.blogspot.com siapa tau tempat kami bisa menjadi salah satu pilihan anda.

Beben mengatakan...

ampir sama yak dengan opacity...hoiehioehioehoe
salam blogger \m/

Muhammad Chandra mengatakan...

boleh di coba nih :D

Huda Cah Pucanglaban mengatakan...

mantab gan artikelnya,
semangat ya........
ditungu kunjungannya.....

D Rian mengatakan...

@Yosh Gangga : Makasih
@Beben : Maksudnya? Setahu saya beda wkwkwk
@Chandra : Silahkan sobat!
@Huda Cah Pucanglaban : Makasih

Dhana/戴安娜 mengatakan...

salam sahabat
wah izin saya simpan yach sewaktu waktu saya praktekkan makasih n good luck

infoNet|Dhana mengatakan...

greeting siip mas tampilen jadi lebih cantik yach makasih

Arief Rizky Ramadhan mengatakan...

Wah baru tau nih saya, saya cuma taunya -moz sama border-radius doang wkwkwk makasih dah gan infonya

D Rian mengatakan...

@Dhana : silahkan
@Arief Rizky Ramadhan: wkwkwkw

Fadel mengatakan...

Bayak macam border radius ya, BTW dlu belum valid CSS, tpi sekaranng dah Valid ;)

Fadel mengatakan...

Border radius belum valid CSS :(

Danu Akbar mengatakan...

apakah benar ini sudah valid?
kayaknya belum deh.
masih beta testing kayaknya :(

Kumpulan Lirik Lagu mengatakan...

hebat banget nich tampilan blognya... amazing + cpt banget

Fadel mengatakan...

@Danu Akbar untuk valid CSS kayaknya gak terlalu penting, radius ini valid di CSS 3" sedangkan deafultnya CSS 2.1

Diseputar mengatakan...

Hmm Bagusnya nih Dicoba.. Makasih Gan :D

HAZEL DIO FEBRIADI mengatakan...

mantab dah

Posting Komentar