TOP

Cara Membuat Border Radius Melengkung pada Tabel

Sebelumnya, tutorial membuat tabel sudah, tutorial membuat dan macam macam border tabel juga sudah. Kali ini saya akan memberikan tutorial membuat tabel lagi, tapi kali ini lebih halus, atau bahasa gaulnya "smooth" (menurut saya loh.. heheh..). Jadi tuh begini, selama ini bila anda mengikuti 2 tutorial saya sebelumnya, ketika tabelnya sudah jadi dan tampil, pasti pinggir pinggirnya kelihatan kotak lancip kaku gitu. Kan kurang keren bukan?? Nah kalau begitu, saya akan menunjukkan cara membuat border radius melengkung, jadi pinggir tabel keliahatan melengkung dan terlihat elegant. Silakan lihat dan pelajari kodenya berikut ini. :


Ini dia border radius dan cara menggunakannya,,





Mozilla Equivalent Browser Opera 10.5 Webkit Equivalent (Safari 3)
-moz-border-radius-topright border-top-right-radius -webkit-border-top-right-radius
-moz-border-radius-bottomright border-bottom-right-radius -webkit-border-bottom-right-radius
-moz-border-radius-bottomleft border-bottom-left-radius -webkit-border-bottom-left-radius
-moz-border-radius-topleft border-top-left-radius -webkit-border-top-left-radius
-moz-border-radius border-radius -webkit-border-radius


-Moz-Border-Radius (Untuk Mozilla)

<div style="background-color:#ccc; -moz-border-radius:5px; border:1px solid #000; padding:10px;">ISI TULISAN</div>

<div style="background-color:#ccc; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:1px solid #000; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5F6CE; -moz-border-radius-topright:30px; -moz-border-radius-bottomright:30px; border:5px solid #000; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5F6CE; -moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5F6CE; -moz-border-radius:30px 10px;  border:5px solid #38610B; padding:10px;">ISI TULISAN</div>



-Webkit-Border-Radius (Untuk Safari)

<div style="background-color:#A9D0F5; -webkit-border-top-left-radius:30px; -webkit-border-bottom-right-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5D0A9; -webkit-border-top-left-radius:50px; -webkit-border-top-right-radius:50px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>



Border-Radius (Support Opera 10.5)

<div style="background-color:#F5F6CE; border-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

Kode-kode diatas bisa juga ditempatkan pada sidebar atau pada css sobat, tinggal sobat bagaimana ingin mengaplikasikannya.. ^_^ Semoga bermanfaat.. Selamat Mencoba lagi Boss!


Related Posts Plugin for WordPress, Blogger...

0 komentar:

Posting Komentar