sudut lengkung ( rounded corner ) `

Assalamu alaikum wr.wb semua jumpa lagi di blognya mastony , pembahasan kita kali ini yaitu cara membuat sudut lengkung ( bundar ) ,biasanya sudut lengkung ini lebih akrabnya kita sebut dengan rounded corner . sebetulnya sudut lengkung ( bundar ) ini adalah hasil dari otak atik dari css border . rounded corner ini dapat di terapkan pada semua element di blog anda misalnya : post-body ,sidebar , header atau element yang menggunakan <div>.oke .. langsung kita simak bersama - sama tutorial membuat sudut lengkung ( rounded corner ) .property yang kita gunakan sebagai berikut :

property	keterangan
border-radius	untuk membuat sudut element melengkung secara keseluruhan nilainya % atau px ( pixel )
border-top-left	untuk membuet element melengkung pada pada bagian sisi sebelah kiri atas saja nilainya % atau px
border-top-right	untuk membuat element melengkung pada pada bagian sisi sebelah kanan atas nilainya % atau px
border-bottom-left	untuk membuat element melengkung pada pada bagian sisi sebelah bawah kiri nilainya % atau px
border-bottom-right	untuk membuat element melengkung pada pada bagian sisi sebelah bawah kanan nilainya % atau px

untuk browser mozilla menggunakan -moz , opera menggunakan -o dan chrome dan safari menggunakan -webkit contoh :
penerapan css :
div.sudutLengkung1{margin:0;padding:0;width:200px;height:200px;background:yellowGreen;border:1px solid gray;border-radius:10%;-moz-border-radius:10%;-webkit-border-radius:10%;-o-border-radius:10%;}

penerapan HTML :
<div class="sudutLengkung1"></div>

Hasil :

kita akan membuat lengkungan yang tidak sama pada sudut element bagian atas 10px dan kiri 20px contoh :

penerapan Css :
div.sudutLengkung2{margin:0;padding:0;width:200px;height:200px;background:yellowGreen;border:1px solid gray;border-top-left-radius:10px 20px;-moz-border-top-left-radius:10px 20px;-webkit-border-top-left-radius:10px 20px;-o-border-top-left-radius:10px 20px;}

Penerapan HTML :
<div class="sudutLengkung2">
</div>

Hasil

sekarang kita akan membuat lingkaran mengunakan gambar sebagai berikut :

penerapan Css :
div.sudutLengkung3{margin:0;padding:0;width:200px;height:200px;background:url(https://sites.google.com/site/mas4nton/blognya-mastony/balon.jpeg)no-repeat;border:1px solid gray;border:1px solid transparent;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;-o-border-radius:50%;background-size:100% 100%;-moz-background-size:100% 100%;-webkit-background-size:100% 100%;-o-background-size:100% 100%;}

Penerapan HTML :

<div class="sudutLengkung3"></div>




gambar original :

sampai disini tutorial membuat sudut lengkung ini selesai semoga bermanfaat ..Bye Bye ..

Terima kasih Anda telah membaca Artikel mengenai sudut lengkung ( rounded corner ) dan Kata kunci untuk Artikel ini yaitu sudut lengkung ( rounded corner )