• Latest News

    Monday, May 20, 2013

    Border radius (untuk membuat efek sudut melengkung)

    Berbagai Contoh Penggunaan Border Radius

    K-wanKOe pembaca yang setia berikut tips membuat border radius, dimana kita bisa mengaplikasikannya pada sebuah table kotak maupun image (foto) baik langsung saja saya berikan contohnya :
    Gambar Asli

    #Contoh_A

    {
    height: 150px;
    width:200px;
    -moz-border-radius-bottomright: 50px;
    border-bottom-right-radius: 50px;
    }

    #Contoh_B

    {
    height: 150px;
    width:200px;
    -moz-border-radius-bottomright: 50px 25px;
    border-bottom-right-radius: 50px 25px;
    }

    #Contoh_C

    {
    height: 150px;
    width:200px;
    -moz-border-radius-bottomright: 25px 50px;
    border-bottom-right-radius: 25px 50px;
    }

    #Contoh_D

    {
    height: 150px;
    width:200px;
    -moz-border-radius: 1em 4em 1em 4em;
    border-radius: 1em 4em 1em 4em;
    }

    #Contoh_E

    {
    height: 150px;
    width:200px;
    -moz-border-radius: 25px 10px / 10px 25px;
    border-radius: 25px 10px / 10px 25px;
    }

    #Contoh_F

    {
    height: 150px;
    width:200px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    }

    Jika diaplikasikan kedalam sebuah image kurang lebih seperti ini :

    <img src="http://2.bp.blogspot.com/-kZ-U22ZTV7M/UZXDs90ABAI/AAAAAAAABhI/JnP2OoXw_zE/s1600/Windows+Photo+Viewer+Wallpaper.jpg" style="-moz-border-radius: 25px 10px / 10px 25px; border-radius: 25px 10px / 10px 25px; float: left; height: 150px; margin: 5px 10px; width: 200px;" />

    Silahkan copy dinotepad dan masukkan ke blog/web anda
    Biru : link image
    Merah : border radius
    Hijau : ukuran image

    Semoga dapat membantu anda dalam membuat tampilan blog / web berbasis HTML yang lebih cantik
    • Blogger Comments
    • Facebook Comments

    0 comments:

    Post a Comment

    Item Reviewed: Border radius (untuk membuat efek sudut melengkung) Rating: 5 Reviewed By: Arif Kurniawan
    Scroll to Top