Rounded corners menggunakan CSS

Suatu ketika saya berpikir, kenapa kok bentuk layout itu kok hanya persegi dimana tiap sudutnya lancip?kenapa sudutnya itu melengkung mungkin akan lebih menari!!!Kemudian muncul istilah rounded corners, apa itu rounded corners?fungsinya seperti apa? akhirnya saya menemukan jawabannya. Untuk lebih jelasnya perhatikan gambar di bawah ini:

Kita dapat melihat bahwa setiap sudutnya memiliki lengkungan yang rapi. Biasanya untuk membuat lengkungan tersebut kita juga dapat 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:

#page-wraper {
 margin-top:10px;
 margin-left:20px;
 margin-right:20px;
 margin-bottom:10px;
 height:auto;
 padding:auto;
 background-position:bottom;        
 width:730px;
 }
 #page-bg {
 margin:0px;
 background:transparent;
 }
 #bungkus {
 height:auto;
 margin:0px;
 padding:10px;
 color:#FFF;
 background:#feeed9;
 }
 .site1, .site2, .site3, .site4 {
 display:block;
 background:#feeed9;
 }
 .site1 {
 height:1px;
 margin:0 5px;
 }
 .site2 {
 height:1px;
 margin:0 3px;
 }
 .site3 {
 height:1px;
 margin:0 2px;
 }
 .site4{
 height:2px;
 margin:0 1px;
 }

Berikut ini adalah kode pengaturan CSS untuk membuat Rounded corners (garis lengkung) pada setiap sudut div:

<div id="page-wraper">
<div id="page-bg">
 <b class="site1"></b><b class="site2"></b><b class="site3"></b><b class="site4"></b>
<div id="bungkus">

PT Excelcomindo Pratama Tbk.  (&ldquo;XL&rdquo; atau &ldquo;Perseroan&rdquo;) didirikan pada tanggal 6 Oktober 1989 dengan nama PT  Grahametropolitan Lestari yang bergerak di bidang perdagangan dan jasa umum.

Pada tahun 1995, seiring  dengan kerjasama antara Rajawali Group &ndash; pemegang saham &ndash; dengan beberapa  investor asing (Nynex, AIF dan Mitsui), PT Grahametropolitan Lestari mengubah  nama menjadi PT Excelcomindo Pratama dengan kegiatan utama usahanya&nbsp; sebagai  penyelenggara jasa teleponi dasar.
XL mulai beroperasi secara  komersial pada tanggal 8 Oktober 1996 dengan menyediakan jasa teleponi dasar  menggunakan teknologi&nbsp; GSM 900. Dalam perkembangannya, XL juga memperoleh  Izin Penyelenggaraan Jaringan Bergerak Seluler untuk teknologi DCS 1800, Izin  Penyelenggaraan Jaringan Tetap Tertutup, Izin Penyelenggaraan Jasa Internet  (Internet Services Protocol/ISP) dan Izin Penyelenggaraan Jasa Internet  Teleponi untuk Keperluan Publik (Voice over Internet Protocol/VoIP). Pada tahun  2006, XL memperoleh Izin Penyelenggaraan Seluler untuk teknologi 3G dan  meluncurkannya secara komersial pada bulan September 2006.
Hingga saat ini, XL telah  mendirikan lebih dari 13.000 menara Base Transceiver Station (BTS) di seluruh  Indonesia untuk melayani&nbsp;22 juta pelanggannya. Dan XL berkomitmen untuk  terus meningkatkan kualitas dan cakupan wilayah selulernya di masa mendatang,  agar kebutuhan komunikasi para pelanggan dapat senantiasa berjalan kapanpun, di  manapun.
Untuk memberikan pelayanan  dan dukungan terbaik bagi para pelanggannya, hingga kwartal I tahun 2007 telah  tersedia lebih dari 156 gerai XL Centerdi seluruh Indonesia, didukung oleh  layanan Contact Center yang selalu siap menyediakan informasi kepada pelanggan  selama 24 jam sehari, tujuh hari seminggu. Pada tahun 2006, XL resmi memperoleh  lisensi 3G, dan selain menggelar layanan 3G yang inovatif, pelanggan XL semakin  dimanjakan dengan hadirnya dukungan Video Contact Center, layanan dukungan  pelanggan berbasis teknologi 3G.
Dengan penyediaan  produk, layanan dan dukungan pelanggan tersebut, berbagai penghargaan bergengsi telah diraih oleh XL. Penghargaan  ini sebagai bukti komitmen XL untuk senantiasa meningkatkan kualitas dan  inovasi produk serta layanannya.</div>
<b class="site4"></b><b class="site3"></b><b class="site2"></b><b class="site1"></b></div>
</div>

maka hasilnya seperti berikut:

literatur:

http://masimnet.awardspace.com/membuat-rounded-corners-menggunakan-css

http://subagya.blogspot.com/2008/09/mengenal-border-lengkung.html