Membuat rounded corners menggunakan CSS
Apa itu Rounded corners?
Untuk lebih jelasnya perhatikan gambar di bawah ini:
Kita dapat melihat bahwa setiap sudutnya memiliki lengkungan yang rapi. Biasanya untuk membuat lengkungan tersebut kita menggunakan gambar (image), namun kita dapat membuat rounded corners tersebut dengan hanya menggunakan CSS. Bagaimana caranya? ikuti langkah-langkah berikut ini.
Inilah kehebatan dari CSS, dengan hanya menggunakan tag elemen HTML b dengan CSS diatur agar berupa blok (display:block) dan membuat warna latar belakang blok tersebut sesuai dengan halaman web kemudian memanipulasi posisinya dengan menggunakan margin.
Yang pertama kita lakukan adalah membuat pengaturan div untuk halaman dan judul serta paragraf:
#halaman {width:80%; margin: 0 auto; }
#judul {margin:0px;background:#fff; }
.judul-teks {height:60px;margin:0px;color:#FFF;background:#090; }
p {margin:0px; padding-left:20px;}Berikut ini adalah kode pengaturan CSS untuk membuat Rounded corners (garis lengkung) pada setiap sudut div:
.line1, .line2, .line3, .line4 {display:block;background:#090;}
.line1 {height:1px; margin:0 5px;}
.line2 {height:1px; margin:0 3px;}
.line3 {height:1px; margin:0 2px;}
.line4 {height:2px; margin:0 1px;}Sekarang kita akan membuat kodenya di dalam dokumen html, buka notepad salin kode berikut kemudian simpan ke komputer anda dengan nama “css_test1.html”
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test CSS</title>
<style type="text/css">
<!--
#halaman {width:80%; margin: 0 auto; }
p {margin:0px; padding-left:20px;}
#judul {margin:0px;background:#fff; }
.judul-teks {height:60px;margin:0px;color:#FFF;background:#090; }
.line1, .line2, .line3, .line4 {display:block;background:#090;}
.line1 {height:1px; margin:0 5px;}
.line2 {height:1px; margin:0 3px;}
.line3 {height:1px; margin:0 2px;}
.line4 {height:2px; margin:0 1px;}
-->
</style>
</head>
<body>
<div id="halaman">
<div id="judul">
<b class="line1"></b><b class="line2"></b><b class="line3"></b><b class="line4"></b>
<div class="judul-teks">
<p>Testing membuat rounded corners dengan CSS</p>
</div>
<b class="line4"></b><b class="line3"></b><b class="line2"></b><b class="line1"></b> </div>
</div>
</body>
</html>Selanjutnya dengan browser kita buka file tersebut, maka hasilnya adalah seperti ini.
Kemudian sekarang kita akan menambah div untuk konten, jika menggunakan warna latar yang berbeda kita harus membuat pengaturan CSS tersendiri untuk lengkungan atau Rounded cornersnya, namun jika sewarna anda bisa membuatnya tanpa perubahan.
Kita akan membuat dengan latar yang berbeda sehingga kita harus membuat pengaturan CSS tersendiri dengan nama class yang berbeda, tambahkan kode berikut di dalam style CSS:
#konten { margin-top: 14px;margin-bottom: 14px;float: left; width: 100%; background:#fff;}
.konten-teks { height: 100%;color:#000; background:#ccc;}
.line1a, .line2a, .line3a, .line4a {display:block;background:#ccc;}
.line1a {height:1px; margin:0 5px;}
.line2a {height:1px; margin:0 3px;}
.line3a {height:1px; margin:0 2px;}
.line4a {height:2px; margin:0 1px;}Dan kode berikut ini kita tambahkan ke dalam tag elemen body:
<div id="konten">
<b class="line1a"></b><b class="line2a"></b><b class="line3a"></b><b class="line4a"></b>
<div class="konten-teks">
<p>Berikut adalah cara membuat rounded corners tanpa menggunakan gambar (image). Inilah kehebatan dari CSS, dengan hanya menggunakan tag elemen HTML b dengan CSS diatur agar berupa blok (display:block) dan membuat warna latar belakang blok tersebut sesuai dengan halaman web kemudian memanipulasi posisinya dengan menggunakan margin. Hasilnya adalah seperti yang anda lihat sekarang.</p>
</div>
<b class="line4a"></b><b class="line3a"></b><b class="line2a"></b><b class="line1a"></b>
</div>Atau anda bisa menyalin kode berikut, sebagai kode komplitnya setelah di masukkan ke dokumen html, simpan file tersebut dengan nama “css_test2.html”
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test CSS</title>
<style type="text/css">
<!--
#halaman {width:80%; margin: 0 auto; }
p {margin:0px; padding-left:20px;}
#judul {margin:0px;background:#fff; }
.judul-teks {height:60px;margin:0px;color:#FFF;background:#090; }
.line1, .line2, .line3, .line4 {display:block;background:#090;}
.line1 {height:1px; margin:0 5px;}
.line2 {height:1px; margin:0 3px;}
.line3 {height:1px; margin:0 2px;}
.line4 {height:2px; margin:0 1px;}
#konten { margin-top: 14px;margin-bottom: 14px;float: left; width: 100%; background:#fff;}
.konten-teks { height: 100%;color:#000; background:#ccc;}
.line1a, .line2a, .line3a, .line4a {display:block;background:#ccc;}
.line1a {height:1px; margin:0 5px;}
.line2a {height:1px; margin:0 3px;}
.line3a {height:1px; margin:0 2px;}
.line4a {height:2px; margin:0 1px;}
-->
</style>
</head>
<body>
<div id="halaman">
<div id="judul">
<b class="line1"></b><b class="line2"></b><b class="line3"></b><b class="line4"></b>
<div class="judul-teks">
<p>Testing membuat lengkungan pada sudut div dengan CSS</p>
</div>
<b class="line4"></b><b class="line3"></b><b class="line2"></b><b class="line1"></b> </div>
<div id="konten">
<b class="line1a"></b><b class="line2a"></b><b class="line3a"></b><b class="line4a"></b>
<div class="konten-teks">
<p>Berikut adalah cara membuat garis lengkungan pada setiap sudut div tanpa menggunakan gambar (image). Inilah kehebatan dari CSS, dengan hanya menggunakan tag elemen HTML b dengan CSS diatur agar berupa blok (display:block) dan membuat warna latar belakang blok tersebut sesuai dengan halaman web kemudian memanipulasi posisinya dengan menggunakan margin. Hasilnya adalah seperti yang anda lihat sekarang.</p>
</div>
<b class="line4a"></b><b class="line3a"></b><b class="line2a"></b><b class="line1a"></b>
</div>
</div>
</body>
</html>Kembali kita buka file tersebut dengan menggunakan browser, maka hasilnya adalah seperti ini.
Berikut adalah contoh komplit dengan header, konten, navigasi dan footer.
Jadi intinya adalah setelah kita mengatur layoutnya, kita cukup menyelipkan kode untuk membuat rounded corners (lengkungan) tersebut di antara div awal dan div akhir.
Untuk melihat atau jika ingin mendownload contoh-contoh dari layout template yang menggunakan rounded corner ini maupun layout template yang biasa anda bisa mendapatkannya di free css templates.
nice article…. semoga bermanfaat bagi semua yang membutuhkan.. keep writing.. cheers…
on June 5th, 2008 at 11:06 pm
wah tutorial bagus, coba nanti saya praktekkan. templatenya juga bagus, simple dan smart. bikin sendiri mas? terus berkarya, semoga sukses.
on June 6th, 2008 at 4:07 am
@Metha
Thanks Metha udah mampir…
@Sumedi
Thanks Sumedi, ya templatenya bikin sendiri.
Sukses juga buat kamu
on June 6th, 2008 at 4:36 pm
mumpung mampir..sekalian komen lg ah..
seandainya css 3 mulai diadopsi resmi dan didukung banyak peramban..
on June 9th, 2008 at 11:58 am
Ya tentu akan lebih simpel dan ringkas, tapi saya percaya bentar lagi pasti menuju kesana koq dan akan di support oleh berbagai browser, kita tunggu aja…
Thanks atas kunjungannya…
on June 9th, 2008 at 3:51 pm
Nice Post.. bisa juga ya ternyata tanpa image…
tapi kalau dilihat dari IE jadi lucu tuh tampilannya… hehe
on August 22nd, 2008 at 8:57 pm
Hanya ditest di browser versi terbaru aja,
Untuk IE6 harus ditambahkan: overflow:hidden;
on August 23rd, 2008 at 12:54 pm
Keren mas, idenya creatif..
roundednya dari garis garis yang di timpa-timpa jadi satu.
ma kasih yah..
on November 24th, 2008 at 6:15 am
Thanks Yudhi
on November 24th, 2008 at 2:48 pm
Wah di IE 6 punya ane gak mau yah
on March 20th, 2009 at 3:55 am
Hi Gemini,
Untuk IE6 kita harus menambahkan: overflow:hidden; seperti contoh css diatas, tambahkan ke baris seperti yang di bawah ini:
.line1, .line2, .line3, .line4 {display:block;background:#090;overflow:hidden;}
.line1a, .line2a, .line3a, .line4a {display:block;background:#ccc;overflow:hidden;}
on March 20th, 2009 at 1:05 pm
sip keren neeh mas tutorialnya thx yah
on April 28th, 2009 at 7:11 am
Terimakasih banyak tutor nya sangat bermamfaat .. salam kenal
on March 16th, 2010 at 11:30 am