CSS3 Border Radius Property

CSS3 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOJFHJT2vihOf-MLNS-fSkqXIwBn_1MX9WsfQbhb-Qxalcvbo6_gmJ5hEBn3vX125Ny_fKeS6S35S27V_yefg5gSQEL89j5N1LXvOpIR7RmHr5z3Ld47gIIqygFofB24RWaA6tLU2nlhI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOJFHJT2vihOf-MLNS-fSkqXIwBn_1MX9WsfQbhb-Qxalcvbo6_gmJ5hEBn3vX125Ny_fKeS6S35S27V_yefg5gSQEL89j5N1LXvOpIR7RmHr5z3Ld47gIIqygFofB24RWaA6tLU2nlhI/h200/gadis2-cantik-300x200.jpg" />

   <img style="margin:20px;width:300px;height:200px;border:none;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOJFHJT2vihOf-MLNS-fSkqXIwBn_1MX9WsfQbhb-Qxalcvbo6_gmJ5hEBn3vX125Ny_fKeS6S35S27V_yefg5gSQEL89j5N1LXvOpIR7RmHr5z3Ld47gIIqygFofB24RWaA6tLU2nlhI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOJFHJT2vihOf-MLNS-fSkqXIwBn_1MX9WsfQbhb-Qxalcvbo6_gmJ5hEBn3vX125Ny_fKeS6S35S27V_yefg5gSQEL89j5N1LXvOpIR7RmHr5z3Ld47gIIqygFofB24RWaA6tLU2nlhI/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!

<!DOCTYPE html> <html> <title>css3 Border-Radius Property</title> <head> <style type="text/css"> body{color:#000;font-family:Arial;font-size:14px;padding:0;margin:0 auto;background:#ccc;} img.border-10b{ width:300px; height:200px; border:none; margin:20px auto 20px 50px; border:10px solid #888; border-radius:10px; } .border-15{ width:300px; height:200px; border:solid 5px #555; margin:15px auto; border-radius:15px; padding:10px; color:#fff; background:#aaa; } </style> </head> <body> <img class="border-10b" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOJFHJT2vihOf-MLNS-fSkqXIwBn_1MX9WsfQbhb-Qxalcvbo6_gmJ5hEBn3vX125Ny_fKeS6S35S27V_yefg5gSQEL89j5N1LXvOpIR7RmHr5z3Ld47gIIqygFofB24RWaA6tLU2nlhI/h200/gadis2-cantik-300x200.jpg" /> <div class="border-15"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOJFHJT2vihOf-MLNS-fSkqXIwBn_1MX9WsfQbhb-Qxalcvbo6_gmJ5hEBn3vX125Ny_fKeS6S35S27V_yefg5gSQEL89j5N1LXvOpIR7RmHr5z3Ld47gIIqygFofB24RWaA6tLU2nlhI/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> <a href="http://bestbloggerhack.blogspot.com/" target="_blank"><img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzPO4Y3TSHDx9GuhtVV98884kAVE4w0Vh1exOyN5S64W9cHuou8Wt2JXxe80gd5k4KV2DmU1lRexEnDx6chOHQD4KhMvQSMhWJIZ0ecYMmboWjy2fhbEbvml_HPL68-xex22qIDZeuIdI/h200/tikus-hutan-250.jpg" style="display:block;margin:20px auto;background: #fff; border-radius: 140px; border: 10px solid #555; box-shadow: 0 0 12px #000; padding: 5px;" width="200" /></a> </body> </html>

Post : CSS3 Border Radius Property
by : gubhugreyot - gubhugcss
my Blogs : Demo Tutorial Blogger-1 | Demo Tutorial Blogger-2 | Best Blogger Hacks | Best Blogger Menus | gubhuggreyot-b'detik | gubhugreyot