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:
Post a Comment