Cara Membuat Lengkungan Pada Border

Membuat Lengkungan Pada Border tutorial blogger CSS - ini sangat menarik sobat untuk ke indah suatu blog,
Maupun website tentunya,
Karna banyak yang belum tau tentang ini,
Maka saya akan memberikan tutorialnya, sebagai berikut :

Cara Membuat Lengkungan Pada Border

Perhatikan Code CSS dibawah ini :

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Nilai 10px adalah ukuran radius ketumpulan sudut. Meskipun di sini Saya meletakkan properti -webkit-border-radius, -moz-border-radius dan
border-radius sekaligus, namun pada dasarnya mereka semua mempunyai tugas yang sama persis. Setiap peramban mempunyai prefiks border radius tersendiri:

-webkit-border-radius: Properti ini milik Safari dan Chrome. Jika Safari/Chrome tidak bisa membaca properti border-radius, maka dia masih bisa membaca properti -webkit-border-radius.-moz-border-radius: Properti ini milik Mozilafirefox. Jika Firefox tidak bisa membaca properti border-radius, maka dia masih bisa membaca properti -moz-border-radius.border-radius: Ini adalah standar W3C. Suatu saat semua peramban harus bisa membaca properti ini.

Contoh :

div {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

Gimana caranya kalau hanya 1 lengkungan atau beberapa lengkungan saja ?

Jadi begini :

Misal .
-webkit-border-radius: 0px 0px 0px 0px;

0px pertama : lengkungan pada atas kiri
0px kedua : lengkungan pada atas kanan
0px ketiga : lengkungan pada bawah kanan
0px keempat : lengkungan pada bawah kiri

Kalau nilai px nya cuma 1 , misal :
-webkit-border-radius: 10px;

Ini untuk semua lengkungan atas dan bawah.

Demikian artikel Membuat Lengkungan Border dengan CSS,
Jika bermanfaat kalian sebarkan ini agar yang lain juga bisa dan jangan lupa sertakan sumber untuk menghargai karya tulis seseorang,
Sekian terimakasih (http://www.seonih.ga/)*

Related Post

Share this

Share on Facebook