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 thoughts on “Membuat border radius & Rounded Corner dengan CSS

        1. hantuceria Post author

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

      1. adi

        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;
        }


      Tinggalkan Balasan

      Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *