Cara Membuat Sudut Melengkung (border-radius) CSS3
- Get link
- X
- Other Apps
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.
- Get link
- X
- Other Apps
