Mengenal border lengkung

Kali ini saya akan membahas bagaimana membuat border lengkung tapi efek ini hanya bisa di lihat di browser firefox dan google chrome, border lengkung ini bisa di aplikasikan di blog sobat biar ga monoton dengan border-border lainnya biar nambah variatif dalam mendesain blog sobat, nih saya kasih contohnya.

contoh dengan border biasa :

Memakai border biasa

contoh dengan border lengkung :

Memakai border lengkung

Tertarik mau membuatnya?

Kalau sobat sudah mengenal properties CSS untuk mengaplikasikan tag properties border lengkung ini sangat mudah, cukup menambahkan :

-moz-border-radius: npx
Nilai n merupakan nilai kelengkungan bordernya
Turunan properties border lengkung ini ada 4 :

* -moz-border-radius-topleft
* -moz-border-radius-topright
* -moz-border-radius-bottomleft
* -moz-border-radius-bottomright

Saya contohkan mengaplikasikannya menggunakan tag <div>

<div style="-moz-border-radius-topleft:12px;-moz-border-radius-bottomright:12px;border:1px solid black;background-color:#c0c0c0;padding:6px;">Hanya contoh pemakaian border lengkung kiri atas dan border lengkung kanan bawah </div>

Maka akan hasilnya akan seperti :

Hanya contoh pemakaian border lengkung kiri atas dan border lengkung kanan bawah

Di atas hanya sebagian contoh penggunaan dari -moz-border-radius kalau sobat sudah pandai dalam CSS maka bisa di terapkan juga di properties border pada bagian style sheet CSS blog sobat, ok saya contohkan mengaplikaskannya ke dalam properties border blockquote, saya akan mengunakan tag blockquote pada contoh ini :

.post blockquote {
margin : 15px 15px 15px 0px;
padding :30px 10px 10px 10px;
clear : both;
list-style-type : none;
background : transparent url(http://lh4.ggpht.com/jaloee/SJnxszef6II/AAAAAAAACX4/etpucC5BrdM/paku.png) no-repeat 50% 5px;
border-top : 1px solid #cccccc;
border-right : 2px solid #000000;
border-bottom : 3px solid #000000;
border-left : 1px solid #eeeeee;
-moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;
}
.post blockquote p{ margin:.75em 0}

Kalau mau ambil code diatas klik view plain nanti akan keluar popup window copy kodenya dari sana

Maka ketika sobat blogger memakai tag blockquote maka hasilnya akan seperti ini :

Lorem ipsum dolor sit amet, consectetuer jquery rules! elit, sed diam nonummy nibh euismod tincidunt ut laoreLorem ipsum dolor sit amet, consectetuer jquery rules! elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam et dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut jquery rules! ex ea commodo consequat

Sekarang tergantung sobat blogger mau di aplikasikan kemana, "Think Out The BOX", daya kreatif sobat di perlukan untuk bisa memakai properties -moz-border-radius- ini. Kalau pengen mengenal border lengkung ini lebih jauh silahkan ke sini