Mempercantik Border dengan CSS

Sekarang saya akan melanjutkan mempercantik Border Blog dengan css, seperti apa yang saya  posting sebelumnya, mengapa saya bahas kembali ? - karena apa yang disampaikan oleh mas Adam makin lama makin asyik saja benar adanya bagi saya secara pribadi, bagaimana kawan apa nggak tertarik seperti Menu Horizontal pada Blog saya ini. 

Kalau dilihat dari scriptnya sepertinya memusingkan kepala, karena urutan pembuatannya tidak diketahui, makanya sekarang saya akan mencoba mengupas cara pembuatannya biar jangan membingungkan atau memusingkan kepala.

Okey langsung saja, pada Dasbor kawan Klik tambah Gadget / elemen baru, tapi sebelumnya saya copas dulu di punyanya mas Adam Dasar-dasarnya yaitu seperti berikut : 

Tabel tersebut menunjukkan tampilan Blog kita biar tidak ada perubahan,  umpama di Chrome bagus tapi belum tentu bagus kelihatannya di Mozilla maupun di Internet Explorer (IE) karena disini saya anggap yang paling bikin jantung deg-degan. 

Biar pembicaraan kita tidak melebar, baiklah langsung saja ke pokok masalah : 

Selanjutkan mari kita perhatikan perbedaan - perbedaannya :

<table border="2">

<tr><td align="center">

CONTOH 

</td></tr></table>

Ini adalah bentuk table biasa, sekarang mari kita tambahkan css

<div style="border:2px solid #000000;-moz-transform: skew(32deg,12deg);-webkit-transform: skew(32deg,12deg);">

CONTOH</div>

Warna merah adalah kemiringan tabel

<div style="border:2px solid #000000;-moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius:0px 0px;border-bottom-right-radius: 10px 10px; ">CONTOH </div>

<div style="border:2px solid #000000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius- bottomleft: 0px 0px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 0px 0px; -border-top-left-radius:10px 10px;-border-bottom-left-radius: 0px 0px;">CONTOH</div>

Coba perhatikan angkanya topleft:10px 10px artinya sudut di kiri atas melengkung sebesar 10px dan bottomleft: 0px 0px  artinya sudut di kiri bawah tidak melengkung alias lurus.

<div style="border:2px solid #000000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 10px 10px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 10px 10px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 10px 10px;">CONTOH</div>

<div style="border:2px solid #000000;-moz-border radius-topright: 10px 10px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 10px 10px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius: 10px 10px;border-bottom-right-radius: 10px 10px; ">CONTOH</div>

<div style="border:2px solid #000000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 10px 10px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 10px 10px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 10px 10px;-moz-border-radius-topright: 10px 10px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 10px 10px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius: 10px 10px;border-bottom-right-radius: 10px 10px;">CONTOH </div>

Bagaimana kawan apa bisa dipahami, sedangkan untuk model yang lainnya silahkan kawan mencoba variasinya.