Border Radius Pada CSS3
Border Radius Pada CSS3 – Border merupakan bagian dari materi CSS2 yaiitu Box Model. Untuk Border Radius sendiri merupakan pengembangan dari materi border yang ada pada CSS Box Model. Border digunakan untuk memberikan style pada pinggiran kotak yang kita buat dalam halaman HTML. sedangkan border radius digunakan untuk membuat setiap ujung dari setiap kotak menjadi tumpul. Semakin besar nilainya maka ujung setiap kotak semakin tumpul.
Untuk dimensi kotak sendiri ada bisa berbentuk empat persegi panjang dan bujur sangkar. Untuk satuan nilai yang digunakan dalam border radius, kita bisa menggunakan pixel ( px ) dan persentase ( % ).
Contoh penggunaan satuan pixel ( px )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Border Pixel</title>
<style>
div {
margin: 20px auto;
}
.border1 {
width: 200px;
height: 200px;
background-color: turquoise;
border-radius: 20px;
}
.border2 {
width: 200px;
height: 200px;
background-color: olive;
border-radius: 100px;
}
</style>
</head>
<body>
<div class="border1"></div>
<div class="border2"></div>
</body>
</html>
Contoh penggunaan satuan persentase ( % )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Border Pixel</title>
<style>
div {
margin: 20px auto;
}
.border1 {
width: 300px;
height: 200px;
background-color: turquoise;
border-radius: 10%;
}
.border2 {
width: 300px;
height: 200px;
background-color: olive;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="border1"></div>
<div class="border2"></div>
</body>
</html>
Noted :
● Untuk penggunaan satuan border radius semakin besar nilainya maka akan semakin tumpul setiap ujung kotaknya.
● Ketika satuan nilai border radius semakin besar dan mendekati setengah atau 50% dari besar dimensinya, maka akan menjadi bentuk ‘lingkaran’ apabila dimensi tersebut berbentuk ‘bujur sangkar’. sehingga apabila nilai border radius lebih besar dari setengah atau 50% dari dimensinya maka tidak akan terjadi perubahan. karena sudut lingkaran sudah yang paling tumpul.
● Ketika satuan nilai border radius semakin besar dan mendekati setengah atau 50% dari besar dimensinya, maka akan menjadi bentuk ‘Elips’ apabila dimensi tersebut berbentuk ‘empat persegi panjang’. sehingga apabila nilai border radius lebih besar dari setengah atau 50% dari dimensinya maka tidak akan terjadi perubahan. karena sudut elips sudah yang paling tumpul.
Untuk modul Border Radius memiliki property sebagai berikut:
● Border Radius : Property ini digunakan untuk memberikan border radius untuk semua atau keempat sisi kotak seperti contoh diatas.
● Border-Top-Right-Radius : Property ini digunakan untuk memberikan border radius hanya untuk ujung sisi bagian kanan atas sebuah kotak.
● Border-Top-Left-Radius : Property ini digunakan untuk memberikan border radius hanya untuk ujung sisi bagian kiri atas sebuah kotak.
● Border-Bottom-Right-Radius : Property ini digunakan untuk memberikan border radius hanya untuk ujung sisi bagian kanan bawah sebuah kotak.
● Border-Bottom-Left-Radius : Property ini digunakan untuk memberikan border radius hanya untuk ujung sisi bagian kiri bawah sebuah kotak.
Setelah kita mengetahui property apa saja yang ada dalam border radius. Kita pelu tahu detil bagaimana menggunakan property border radius tersebut.
Pertama, property border radius bisa digunakan dengan menggunakan satu persatu property. biasanya cara ini digunakan ketika kita ingin membuat kotak yang ujungnya tumpul, namun tidak semua ujung ingin kita buat tumpul.
Kedua kita bisa gunakan property border radius seperti kita menggunakan margin dan padding. Kita hanya cukup buat satu baris dengan menggunakan property border radius dan menyebutkan setiap nilai atau angka ketumpulan sebagai parameter dari kotak tersebut yang dimulai dari sudut sisi atas kiri, sudut sisi atas kanan, sudut sisi bawah kanan, dan terakhir sudut sisi bawah kiri apabila nilainya berbeda. namun kita bisa menggunakan satu nilai ketika kita ingin membuat ketumpulan yang sama pada setiap ujung sisi kotak.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Penggunaan Property Border Radius</title>
<style>
div {
margin: 20px auto;
}
.border1 {
width: 200px;
height: 200px;
background-color: turquoise;
border-top-left-radius: 5px;
border-top-right-radius: 50%;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 50%;
}
.border2 {
width: 200px;
height: 200px;
background-color: olive;
border-radius: 5px 50% 5px 50%;
}
</style>
</head>
<body>
<div class="border1"></div>
<div class="border2"></div>
</body>
</html>
Border radius sebagai salah satu property CSS3 yang digunakan untuk memberikan style pada halaman HTML agar semakin menarik. Menurut saya sangat keren ketika kita mengkombinasi penggunaan border radius dengan menggunakan property CSS background image untuk membuat sebuah dekorasi halaman website agar semakin cantik. Sebagai contoh ketika kita ingin membuat sebuah frame foto, kita bisa memanfaatkan border radius ini di dalam file css. Bakcground image pada file css akan secara otomatis terbungkus di dalam border yang kita buat. untuk lebih jelas silakan lihat contoh dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Border Radius Untuk Image</title>
<style>
div {
margin: 20px auto;
}
.border1 {
width: 500px;
height: 500px;
background-color: turquoise;
background-image: url(img/baby.png);
background-repeat: no-repeat;
background-size: cover;
border-radius: 0 50% 0 50%;
}
</style>
</head>
<body>
<div class="border1"></div>
</body>
</html>
 |
| Frame / Bingkai Foto |
Namun Hati-Hati ketika menggunakan image sebagai bagian dari elemen HTML, maka tidak secara otomatis terbungkus kedalam border yang kita buat. kasus ini sama ketika kita membuat sebuah text pada di dalam border, tidak akan secara otomatis terbungkus kedalam border, karena itu kita mengakali hal tersebut, agar tampak terlihat menarik dan cantik. Lihat contoh sintak dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Border Radius Untuk Image</title>
<style>
div {
margin: 20px auto 100px;
}
.border1 {
width: 300px;
height: 300px;
background-color: pink;
border-radius: 50% 0 50% 0;
}
.border2 {
width: 500px;
height: 500px;
background-color: turquoise;
border-radius: 0 50% 0 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="border1">
<h1>Hello World</h1>
</div>
<div class="border2">
<img src="img/baby.png" alt="baby" title="baby">
</div>
</div>
</body>
</html>
Untuk stylenya kita perlu menambah property untuk memperbaiki tampilan dihalaman browser sebagai berikut:
<style>
div {
margin: 20px auto 100px;
}
.border1 {
width: 300px;
height: 300px;
background-color: pink;
border-radius: 50% 0 50% 0;
text-align: center;
line-height: 300px;
}
.border2 {
width: 500px;
height: 500px;
background-color: turquoise;
border-radius: 0 50% 0 50%;
overflow: hidden;
}
img {
width: 500px;
height: 500px;
}
</style>
Jadi untuk mengatasi text hello world yang keluar kita perlu memberi property css text align dengan nilai center. Dan property css line heigt dengan nilai sama dengan tinggi dari elemen tag <div> yang membungkusnya.
Untuk mengatasi gambar yang tidak terbungkus didalam border kira perlu menambahkan property css overflow dengan nilai hidden untuk menyembunyikan kelebihan yang ada diluar border. Selanjutnya samakan ukuran gambar dengan tag <div> yang membungkusnya baik tinggi dan lebarnya.
Ok sekian untuk catatan mengenai border radius ini, sebagai bagian dari CSS3. Untuk teman-teman yang butuh ide menggunakan property CSS3 border radius ini. silakan dowload contoh souce code border radius dibawah ini:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
Post a Comment for "Border Radius Pada CSS3"
Silakan berkomentar secara bijak dan sesuai dengan topik pembahasan