Berikut langsung saya contohkan saja biar lebih paham.
misal script HTML nya seperti berikut:
<html>
<head>
<title>Belajar Border Radius | alfaruqdeveloper.blogspot.com</title>
</head>
<body>
<div class="objek1"></div>
<div class="objek2"></div>
</body>
</html>
Membuat seluruh sudut melengkung
Jadi sudut objek akan sama semua lengkungannya.
Masukkan script css berikut. Saya menggunakan embedded css jadi script css nya dimasukkan di dalam tag head pada file html.
<head>
<style>
.objek1 {
width: 100px;
height: 100px;
float: left;
margin: 10px;
background-color: blue;
}
.objek2 {
width: 100px;
height: 100px;
float: left;
margin: 10px;
background-color: red;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px; /*-moz- agar dapat tetap muncul pada browser mozilla*/
-webkit-border-radius: 10px 10px 10px 10px; /*-moz- agar dapat tetap muncul pada browser google chrome*/
}
Membuat per bagian sudut melengkung berbeda
Kita dapat mengatur kelengkungan masing-masing sudut. Otak-atik style di class objek 2 saja menjadi seperti berikut ini.
.objek2 {
width: 100px;
height: 100px;
float: left;
margin: 10px;
background-color: red;
border-radius: 10px 0 0 0;
-moz-border-radius: 10px 0 0 0; /*-moz- agar dapat tetap muncul pada browser mozilla*/
-webkit-border-radius: 10px 0 0 0; /*-moz- agar dapat tetap muncul pada browser google chrome*/
}
hasilnya
Untuk mencoba variasi yang lain, cobalah membuat lengkung seperti berikut agar lebih paham:
Mungkin cukup sekian saja tutorial dari saya mengenai border radius css, atau bisa disebut rounded corner, atau sudut melengkung, terserah yang menyebut :D, semoga bermanfaat. Selamat berkarya :)
0 comments:
Post a Comment