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

No Related Post Found.

Post a comment

You can use these XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <q cite=""> <strong>



21 Responses to “Membuat rounded corners menggunakan CSS”

  1. metha says:
    05/06/2008 at 23:06

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

    Reply
  2. sumedi says:
    06/06/2008 at 04:07

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

    Reply
  3. Masim man says:
    06/06/2008 at 16:36

    @Metha
    Thanks Metha udah mampir…

    @Sumedi
    Thanks Sumedi, ya templatenya bikin sendiri.

    Sukses juga buat kamu :)

    Reply
  4. dani says:
    09/06/2008 at 11:58

    mumpung mampir..sekalian komen lg ah.. :)
    seandainya css 3 mulai diadopsi resmi dan didukung banyak peramban.. :(

    Reply
  5. Masim man says:
    09/06/2008 at 15:51

    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…

    Reply
  6. namakamu says:
    22/08/2008 at 20:57

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

    Reply
  7. Masim man says:
    23/08/2008 at 12:54

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

    Reply
  8. Yudhi Karunia Surtan says:
    24/11/2008 at 06:15

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

    Reply
  9. Masim man says:
    24/11/2008 at 14:48

    Thanks Yudhi :)

    Reply
  10. gemini says:
    20/03/2009 at 03:55

    Wah di IE 6 punya ane gak mau yah

    Reply
  11. Masim man says:
    20/03/2009 at 13:05

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

    Reply
  12. idik says:
    28/04/2009 at 07:11

    sip keren neeh mas tutorialnya thx yah

    Reply
  13. ado says:
    18/09/2010 at 15:30

    maaf mas, di IE belum bisa ya mas …

    TQ
    Ado

    Reply
  14. avngr says:
    27/04/2011 at 09:33

    @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

    Reply
  15. riska says:
    05/08/2011 at 15:51

    wah..manteb mas tutorialnya..

    Reply
  16. pabx panasonic says:
    16/08/2011 at 03:56

    keren banget dah tutorialnya.. terimakasih ya.. :)

    Reply
  17. Masim man says:
    17/08/2011 at 04:01

    Thanks…

    Riska/Pabx panasonic ;)

    Reply
  18. ihwansejati says:
    28/09/2011 at 16:43

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

    Reply
  19. mysel says:
    12/10/2011 at 18:57

    terima kasih atas sharingnya, saya coba dulu mas

    Reply
  20. toko obat herbal says:
    06/03/2012 at 13:36

    Thanks…:)

    Reply
  21. herry murjani says:
    25/03/2012 at 22:56

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

    Reply