Cara Mudah Membuat Border Tumpul/Border-Radius

Oleh Rafid Aslam

24 Juli 2014

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.

Tag : Tips Blogger

Bagikan :

Tweet