Cara membuat sudut tumpul atau rounded corner

Jika anda masih kurang puas dengan tampilan sidebar,banyak cara untuk mempercntik tampilan menu sidebar,selain dengan membuat judul sidebar efek 3 dimensi kita bisa membuat tampilan lebih variatif lagi seperti yang kan kita bahas kali ini adalah membuat sudut tumpul pada tampilan sidebar.
Sebenarnya sudut tumpul ini tidak hanya untuk judul sidebar tetapi bisa kita gunakan pada widget manapun yang kita suka hanya dengan menambahkan sedikit kode dibawahnya.
Berikut ini adalah kode untuk rounded corner atau sudut tumpul

1.Semua sudut tumpul/Full rounded corner

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;

2.Sudut tumpul diatas

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

3.Sudut tumpul dibawah

-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

4.Sudut tumpul kiri atas dan kanan bawah:

-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-bottomright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-bottomright: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;

Setelah memahami beberapa kode untuk rounded corner selanjutnya kita bisa menerapkan pada blog kita dimana yang kita inginkan sudutnya menjadi tumpul,tinggal menambahkan kode kode seperti diatas dibawah kode awalnya.
Misal kita akan mengubah judul sidebar menjadi sudut tumpul:
Pertama cari kode untuk sidebar (.sidebar h2{

.sidebar h2{ font-size:14px;
margin:1px 0 4px;
font-weight:bold;
text-transform:none;
text-align:justify;
background:$bordercolor;
padding: 2px;
border-top: 2px solid #FFCC99;
border-right: 2px solid #333300;
border-bottom: 2px solid #333300;
border-left: 2px solid #CC9933;
}

Selanjutnya tinggal tambahkan salah satu kode seperti diatas,dibawah ini kita akan menambahkan semua sudut tumpul

.sidebar h2{ font-size:14px;
margin:1px 0 4px;
font-weight:bold;
text-transform:none;
text-align:justify;

background:$bordercolor;

padding: 2px;

border-top: 2px solid #FFCC99;

border-right: 2px solid #333300;

border-bottom: 2px solid #333300;

border-left: 2px solid #CC9933;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px;

}

KET:

• Kode yang berwarna hitam adalah kode awal
• Kode yang berwarna biru adalah untuk membuat efek 3 dimensi(untuk variasi 3 dimensi)
• Kode yang berwarna merah adalah untuk membuat semua sudut tumpul

Selesai