Membuat rounded corners menggunakan CSS

Apa itu Rounded corners?
Untuk lebih jelasnya perhatikan gambar di bawah ini:

CSS test1

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:0;background:#fff; }
.judul-teks {height:60px;margin:0;color:#fff;background:#090; }
p {margin:0; 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:0; padding-left:20px;}
#judul {margin:0px;background:#fff; }
.judul-teks {height:60px;margin:0;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.

Preview

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 layout.

Posted on June 1st, 2008 in Belajar CSS by Masim man

Post a comment

21 Responses to “Membuat rounded corners menggunakan CSS”

  1. metha said:

    nice article…. semoga bermanfaat bagi semua yang membutuhkan.. keep writing.. cheers…

  2. sumedi said:

    wah tutorial bagus, coba nanti saya praktekkan. templatenya juga bagus, simple dan smart. bikin sendiri mas? terus berkarya, semoga sukses.

  3. Masim man said:

    @Metha
    Thanks Metha udah mampir…

    @Sumedi
    Thanks Sumedi, ya templatenya bikin sendiri.

    Sukses juga buat kamu ๐Ÿ™‚

  4. dani said:

    mumpung mampir..sekalian komen lg ah.. ๐Ÿ™‚
    seandainya css 3 mulai diadopsi resmi dan didukung banyak peramban.. ๐Ÿ™

    • Masim man said:

      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โ€ฆ

  5. namakamu said:

    Nice Post.. bisa juga ya ternyata tanpa image…
    tapi kalau dilihat dari IE jadi lucu tuh tampilannya… hehe

  6. Masim man said:

    Hanya ditest di browser versi terbaru aja,
    Untuk IE6 harus ditambahkan: overflow:hidden;

  7. Yudhi Karunia Surtan said:

    Keren mas, idenya creatif..
    roundednya dari garis garis yang di timpa-timpa jadi satu.
    ma kasih yah..

  8. gemini said:

    Wah di IE 6 punya ane gak mau yah

    • Masim man said:

      Hai 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;}

  9. idik said:

    sip keren neeh mas tutorialnya thx yah

  10. ado said:

    maaf mas, di IE belum bisa ya mas …

    TQ
    Ado

  11. avngr said:

    @ado : klo di IE bisa pke behavior border-radius.htc, penjelasan lengkapnya bisa kunjungi : http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

  12. riska said:

    wah..manteb mas tutorialnya..

  13. keren banget dah tutorialnya.. terimakasih ya.. ๐Ÿ™‚

  14. Masim man said:

    Thanks…

    Riska/Pabx panasonic ๐Ÿ˜‰

  15. ihwansejati said:

    artikel paling gamblang walau aku msh blm mudeng, tp mdh dipahami tuk pemula sepertiku.makasih & salam ukhuwah

  16. mysel said:

    terima kasih atas sharingnya, saya coba dulu mas

  17. makasaih Mas Bro, ini yg saya cari-cari, informatip n aplikatip…

  18. Terimakasih banget untuk tutorial Membuat rounded corners menggunakan CSS nya, tp untuk web q, itu semua mungkin udah dari theme nya ya gan? he..he.. maklum newbie… n jujur lg belajar css. ok…thx y..!

Back to top