Cara Membuat Sudut Melengkung (border-radius) CSS3

Pada tutorial css sebelumnya saya tidak pernah menyinggung versi css, css2 dan css3. Karena sebenarnya sama seperti  sofware lainnya, kenaikan versi intinya ada penambahan dan pembaharuan. Contohnya seperti PHP sekarang sudah versi 7 keatas, kalau kita bahas setiap versinya bisa menambah waktu untuk belajar. Bagian terpenting dari kenaikan versi yang harus kita tahu adalah ada tidaknya perubahan syntax atau penghapusan. Kalau tidak ada maka tidak ada masalah. Kabar baiknya kenaikan versi indentik dengan penambahan fitur dan sedikit sekali perubahan dan kalau berubah bisanya masih bisa berjalan dengan versi yang disesuaikan.

Baik langsung saja kita bahas cara membuat sudut melengkung dengan css3. Sudut melengkung bisa dibuat dengan properti border-radius di css. Border radius ini termasuk properti baru yang dikenalkan di css versi 3. Jika anda hobi desain misalnya di photoshop, corel draw dan lain-lain, pasti kata radius tidak asing lagi. Misalnya kita mendesain sebuah tombol atau box berbentuk persegi akan menjadi enak dilihat jika sudutnya sedikit melengkung. Bahkan dengan border radius kita dapat membuat bentuk-bentuk lain seperti lingkaran.

#file html
<!DOCTYPE html>
<html>
<head>
<title>Border Radius</title>
<link rel="stylesheet" type="text/css" href="border-radius.css">
</head>
<body>
<div>
<div class="tombol">
OK
</div>
<div class="tombol2">
Cancel
</div>
<div class="tombol3">
STOP
</div>
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
<div class="box5">
</div>
</body>
</html>


#file css (border-radius.css)
.tombol{
border-radius: 5px;
border-style: ridge;
border-left: transparent;
border-top: transparent;
border-right: transparent;
border-color: #a0dd23;
border-width: 5px;
background-color: #bbdd23;
width: 50px;
height: 20px;
padding: 10px;
color: white;
display: flex;
align-items: center;
justify-content: center;
float: left;
margin-right: 10px;
}
.tombol2{
border-radius: 5px;
border-style: ridge;
border-left: transparent;
border-top: transparent;
border-right: transparent;
border-color: #ffcc23;
border-width: 5px;
background-color: #ffdd23;
width: 50px;
height: 20px;
padding: 10px;
color: white;
display: flex;
align-items: center;
justify-content: center;
float: left;
margin-right: 10px;

}
.tombol3{
border-radius: 100%;
border-style: ridge;
border-left: transparent;
border-top: transparent;
border-right: transparent;
border-color: #ff3333;
border-width: 5px;
background-color: #ff4444;
width: 20px;
height: 20px;
padding: 10px;
color: white;
display: flex;
align-items: center;
justify-content: center;

}
.box1{
margin-top: 15px;
width: 100px;
height: 100px;
background-color: #bbddff;
border-radius: 30px 0 0 0;
float: left;
margin-right: 5px;

}
.box2{
margin-top: 15px;
width: 100px;
height: 100px;
background-color: #bbddff;
border-radius: 0 30px 0 0;
float: left;
margin-right: 5px;

}
.box3{
margin-top: 15px;
width: 100px;
height: 100px;
background-color: #bbddff;
border-radius: 0 0 30px 0;
float: left;
margin-right: 5px;

}
.box4{
margin-top: 15px;
width: 100px;
height: 100px;
background-color: #bbddff;
border-radius: 0 0 0 30px;
float: left;
margin-right: 5px;

}
.box5{
margin-top: 15px;
width: 100px;
height: 100px;
background-color: #bbddff;
border-radius: 30px;
float: left;
margin-right: 5px;

}

#tampilan
Border radius dapat mengatur setiap sudut dari box baik satu per satu maupun sekali semua. Terima Kasih.


Popular posts from this blog

Cara Membuat Kalkulator Dengan Java Script

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

Aplikasi CRUD menggunakan Template Admin LTE