CSS3 Border Radius Property

Tikus besarCSS3 border radius property berfungsi untuk membentuk border dengan sisi lengkung (rounded corners). Pada saat ini semua browser telah support terhadap border-radius property, bahkan semuanya sudah menggunakan kode standart. Jika pada masa sebelumnya untuk membuat sudut lengkung harus menggunakan background image, dengan hadirnya css3 border-radius property maka untuk membentuk sudut lengkung hanya perlu menambahkan kode "border-radius" yang nilainya dalam bentuk pixel (px), em, pt atau % (persen). Untuk penggunaan secara umum lebih banyak dalam satuan px karena dengan nilai ini semua browser menghasilkan output yang seragam.

Obyek penggunaan css3 border-radius property

  1. Object berupa Image Keempat sisi image dapat dibentuk bersudut lengkung dengan besaran tertentu dengan menambahkan css3 border-radius property, baik menggunakan kode css ataupun secara langsung melalui xHTML. Anda juga dapat menggabungkan border property lainnya untuk digabungkan dengan css3 border-radius property.
    Contoh:
    <style type="text/css">
    img.border-10a{
          margin:20px;
          border-radius:10px;
    }
    </style>
    
    <img class="border-10a" src="https://lh6.googleusercontent.com/-zsJ1RyQAmzY/UC_sgFFyboI/AAAAAAAAAL0/8ec-T8IPQAA/h200/gadis2-cantik-300x200.jpg" width="300" height="200" border="0" />
    <style type="text/css">
    img.border-10b{
          width:300px;
          height:200px;
          border:none;
          margin:20px;
          border:10px solid #888;
          border-radius:10px;
    }
    </style>
    
    <img class="border-10b" src="https://lh6.googleusercontent.com/-zsJ1RyQAmzY/UC_sgFFyboI/AAAAAAAAAL0/8ec-T8IPQAA/h200/gadis2-cantik-300x200.jpg" />
    <img style="margin:20px;width:300px;height:200px;border:none;" src="https://lh6.googleusercontent.com/-zsJ1RyQAmzY/UC_sgFFyboI/AAAAAAAAAL0/8ec-T8IPQAA/h200/gadis2-cantik-300x200.jpg" />
  2. Object berupa box Tak berbeda dengan penggunaan css3 border-radius property pada object berupa image, pada object berupa box juga dapat digabungkan dengan border property yang lain.
    Contoh:
    <style type="text/css">
    .border-15{
          width:300px;
          height:200px;
          border:solid 5px #555;
          margin:15px auto;
          border-radius:15px;
          padding:10px;
          color:#fff;
          background:#aaa;
    }
    </style>
    
    <div class="border-15">
    <img src="https://lh6.googleusercontent.com/-zsJ1RyQAmzY/UC_sgFFyboI/AAAAAAAAAL0/8ec-T8IPQAA/h100/gadis2-cantik-300x200.jpg" style="float:left;padding:4px;margin:0 12px 5px 0;border:8px solid #333;border-radius:12px;" width="150" height="100" />
    Anda dapat menambah konten dalam  box, baik berupa image maupun teks serta link dan obyek lainnya seperti misalnya video atau iframe. Dalam contoh ini image juga menggunakan border-radius (rounded corners) sehingga keempat sisinya bersudut lengkung.
    </div>

Cara penulisan kode css3 border-radius property

Kode/Posisi Sudut Lengkung
top-left
top-right
bottom-right
bottom-left
border-radius: A;
A
A
A
A
border-radius: A B C D;
A
B
C
D
border-radius: A B;
A
B
A
B
border-radius: A B C;
A
B
C
B

Contoh

Kode/Posisi Sudut Lengkung
top-left
top-right
bottom-right
bottom-left
border-radius: 10px
10px
10px
10px
10px
border-radius: 20px 40px 70px 100px;
20px
40px
70px
100px
border-radius: 30px 65px;
30px
65px
30px
65px
border-radius: 22px 35px 8px;
22px
35px
8px
35px
border-radius: 50%;
50%
50%
50%
50%
border-radius: 20% 40%;
20%
40%
20%
40%
Di bawah ini telah tersedia kode berikut image untuk melakukan berbagai percobaan terhadap css3 border-radius property. Silahkan lakukan beberapa perubahan nilai dan posisi border-radius shg diperoleh berbagai variasi bentuk tampilan image.

Please click the button to display. Continue with editing code and click to see the results!

Tidak ada komentar:

Posting Komentar

My ProfileC l o s e

FollowerC l o s e