Membuat Border Dengan CSS

Bagaimana cara menyiasati tampilan html supaya tak melulu kotak? CSS bisa membuat sudut-sudut dalam html akan tampak melengkung (rounded corner), sahabat hanya perlu menambahkan beberapa style ke dalam kode html. Berikut contoh kode CSS nya:


Melengkung semua sudut :
<div style="border:3px solid #1919B3; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;">AKU</div>

AKU

Melengkung pada sudut kiri atas :


<div style="border:3px solid #FF0000; border-top-left-radius:10px; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px;">SEORANG</div>

SEORANG

Melengkung sudut kanan atas


<div style="border:3px solid #33FF00; border-top-right-radius:10px; -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px;">LELAKI</div>

LELAKI

Melengkung sudut kiri bawah


<div style="border:1px solid #000000; border-bottom-left-radius:10px; -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px;">YANG</div>  

YANG

Melengkung kanan bawah :


<div style="border:1px solid #000000; border-bottom-right-radius:10px; -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px;">TERANIAYA KEADAAN</div>

TERANIAYA KEADAAN