Membuat border radius & Rounded Corner dengan CSS

Waktu kemaren ane mo buat web, ane terpesona dengan web-web yang tampilannya ada bayang-bayangnya… ane kira itu pake bantuan gambar background… lalu ane coba trace sourcecodenya eh.. ternyata, gak pake bantuan image..
setelah bongkar-bongkar kantong ajaib mbah google, ane menemukan jawabannnya:

Kini dalam layouting tampilan Web kususnya membuat round corner dan border shadow (border lengkung dan bayangan) sudah sangat mudah dengan bantuan CSS3, jadi gak perlu lagi direpotkan dengan membuat gambar border lengkung/ berbayang di image editor.
CSS 3 walaupun masih eksperimental, tetapi memberikan banyak fitur-fitur syntax yang memudahkan kita dalam membuat tampilan website yang dinamis, contohnya round corner dan shadow border yang akan ane coba bahas berikut ini. keuntungan menyetting border menggunakan css3 ini dibanding menggunakan image adalah dalam hal besar file dan waktu akses, dengna menggunakan css3 file html yang kita buat akan lebih ringan karena hanya ditambahkan kode text di css tanpa harus menambah gambar yang besar.

dalam mengatur hiasan border dengan css3 ini ada hal yang perlu diperhatikan:
Browser support

Berikut adalah list kompatibilitas masing-masing browser dalam menangani syntax CSS untuk round corner dan shadow border

Membuat Border Lengkung:

<style>
div #lengkung {
width:100px; height:100px;
border:2px #fff solid;
border-radius:25px;
-moz-border-radius:25px;
}
</style>
<div id="lengkung" >LENGKUNG</div>

Mari lanjut, untuk membuat box berbayang…
pertama perhatikan gambar dibawah ini, ada beberapa macam model box berbayang yang bisa diatur menggunakan CSS3

oke ini, script untuk layoutingnya:

contoh A: offset di kiri dan atas sebanyak 5px
#contoh_A {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

contoh B: offset di kiri dan atas dengan blur sebanyak 5px
#contoh_B {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

contoh C: offset di kiri dan atas dengan spread sebanyak 5px
#contoh_C {
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}

contoh D: offset di kiri dan atas dengan blur dan spread sebanyak 5px
#contoh_D {
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}

contoh E: tanpa offset tetapi dengan blur 5px
#contoh_E {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

contoh F: tanpa offset tetapi dengan blur dan spread 5px
#contoh_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

oke segini dulu yah…

diolah dari sumber

9 Comments


  1. Sempat beberapa kali menggunakan box berbayang tsb.
    Lumayan keren sih hasilnya.
    Jadi lebih cetar membahana, hihihi… 😀

    Reply

    1. yoi… tampilan bisa lebih elegan

      Reply

  2. Keren, kirain yg berbayang itu pakai PNG transparant, ternyata sudah bis apakai kode yak.

    Reply

    1. iyap…kalo dulu sih pake png transparent… tapi kalo sekarang nggak coz udah disediain kodenya heheh

      Reply

  3. please tolongin saya, saya pengen related post saya yg ada imagenya di kasih border tapi tak tau caranya ini codenya

    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:2px;
    padding-left:2px;
    }

    #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: #000000;
    font-family: Georgia, “Times New Roman”, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:#000000;
    }
    #related-posts a:hover{
    color:#000000;
    }

    #related-posts a:hover {
    background-color:#FFDD00;
    }


    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *