Saya akan berikan contoh pengunaan border-radius pada tulisan saja, jika ingin menambahkan pada sidebar atau kotak postingan juga bisa. CSS ini bisa di gunakan sesuai keinginan akan di tempatkan dimana yang dikehendaki.
Berikut ini syntax untuk border-radius dan beberapa contoh penulisan di blog menggunakan kode border-radius.
<div style="background-color:#ccc; -moz-border-radius:5px; border:1px solid #000; padding:10px;">ISI TULISAN</div>
<div style="background-color:#ccc; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:1px solid #000; padding:10px;">ISI TULISAN</div>
<div style="background-color:#F5F6CE; -moz-border-radius-topright:30px; -moz-border-radius-bottomright:30px; border:5px solid #000; padding:10px;">ISI TULISAN</div>
<div style="background-color:#F5F6CE; -moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>
<div style="background-color:#F5F6CE; -moz-border-radius:30px 10px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>
<div style="background-color:#A9D0F5; -webkit-border-top-left-radius:30px; -webkit-border-bottom-right-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>
<div style="background-color:#F5D0A9; -webkit-border-top-left-radius:50px; -webkit-border-top-right-radius:50px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>
<div style="background-color:#F5F6CE; border-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>
Jika ingin membuatnya pada sidebar blog, silahkan sobat aplikasikan kode css sidebar blog sobat dengan kode diatas. Caranya hanya menambahkan kode yang saya tebalkan diatas kedalam css sidebar blog sobat.
Semoga bermanfaat ya.
Author : coxelgokil | ACI BUDAYA
Anda telah membaca
artikel tentang : Cara Membuat Garis Lengkung Dengan CSS. Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...
