Border radius biasanya digunakan untuk membengkokan border yang biasanya lancip dan terlihat membosankan. Mungkin anda belum tahu tentang border-radius, anda lihat mencari-cari ke internet dan tidak menemukan apa-apa tentang border-radius. Saya pun bingung dulunya melihat border-radius itu pada CSS template itu, ternyata untuk membengkokan border agar tidak lancip seperti biasanya. Properti border-radius bisa membuat border menjadi tumpul, ukuran border-radius hanya mencapai 90px, jika semua border kita pasang properti border-radius 90px maka border tersebut akan menjadi lingkaran. Cara membuat border ini sangat mudah dan dilengkapi tools agar anda bisa membuatnya lebih mudah.
Langkah pertama: Masuk ke sini http://css3gen.com/border-radius/
Langkah kedua: Mengatur ukuran border-radius nya
Anda bisa mengatur properti border-radius nya seperti yang dilingkari di atas, dengan menggunakan tool ini bisa langsung muncul hasilnya. Border-radius hanya bisa mencapai batas 90px jika sudah sampai 90px maka akan menjadi lingkaran.
Langkah terakhir: Mengambil CSS dan menerapkannya
Scroll ke bawah, hasil cssnya ada di bawah tulisan
Generated CSS dan ambil css tersebut dan terapkan pada elemen-elemen yang ingin anda pasang border-radius.
Penerapannya:
Copy hasil css yang tadi dan terapkan pada elemen yang ingin anda pasangkan border radius, contohnya seperti css di bawah ini.
.elemennya {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
Misalnya anda ingin menambahkan pada tag
<div> pada post, anda menerapkannya seperti di bawah ini.
<div style="-moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #000;">
ISINYA
</div>
Hasilnya:
ISINYA
Terimakasih sudah melihat post ini, namun wajar jika dari post ini masih banyak bagian-bagian yang tidak anda mengerti mungkin dari kata-katanya, jadi jika anda kebingungan dengan post ini anda bisa menanyakannya di kotak komentar di bawah ini.
Artikel keren lainnya:
Belum ada tanggapan untuk "Cara Mudah Membuat Border Tumpul/Border-Radius"
Post a Comment