Select Language



Followers

IT Programmer. Powered by Blogger.

08 November 2011

Cara Membuat Sudut Bundar atau Rounded Corner dengan CSS

Rounded corner dalam border adalah corner yang bentuknya tidak siku-siku seperti border pada umumnya, tetapi bentuknya membulat. Banyak programmer menggunakan gambar untuk membuat round corner. Tetapi seiring berkembangnya teknologi, kini ada cara yang lebih mudah yang bisa kita gunakan untuk membuat rounded corner. Yaitu dengan menggunakan CSS (Cascading Style Sheet).

Ada beberapa syntax CSS yang harus kita gunakan untuk membuat round corner. Dimana setiap syntax mempunyai perannya sendiri untuk tiap web browser. Webkit untuk browser Google Chrome, Moz untuk Mozzila. Jika ingin membuat rounded corner, maka gunakanlah kedua syntax tersebut. Agar rounded corner yang kalian buat bisa terlihat dikedua browser. Secara dasar syntax untuk membuat rounded corner adalah seperti ini:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
Jika kalian menerapkannya, maka semua border akan terlihat lebih membundar.

Jika ingin corner yang lebih spesifik, maka gunakan syntax ini:

    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 20px;
    -moz-border-radius-topleft: 30px;
    -moz-border-radius-topright: 50px 25px;

    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 20px;
    -webkit-border-top-left-radius: 30px;
    -webkit-border-top-right-radius: 50px 25px;

Contoh penggunaanya seperti ini:

#contoh_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
-webkit-border-top-right-radius: 50px;
}
#contoh_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
-webkit-border-top-right-radius: 50px 25px;
}

Jika ingin membuat lingkaran yang sempurna, pertama, kalian harus menyamakan nilai tinggi dan lebar dari div yang ingin kalian gunakan. Setelah itu set border radius menjadi 50%. Contoh:

.lingkaran{
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}

Semoga berguna buat temen-temen sekalian.



Comments:

Ada 0 comments pada “Cara Membuat Sudut Bundar atau Rounded Corner dengan CSS”

Social Media


Facebook Page

Programming Tutorial


Info


Tips
Downloads
Friends
 
This Blog is proudly powered by Blogger.com | Template by Bali Web Development | Privacy Policy | Rise Up!!