Apa Itu -border-radius? -border-radius adalah salah satu property css3, sedangkan fungsi dari border-radius adalah untuk membuat lengkungan pada box-box tag html! -border-radius properti digunakan dalam CSS dan beberapa tag HTML khusus untuk membuat perbatasan bulat objek tertentu. Tapi efeknya hanya dapat dilihat dalam browser tertenu, seperti Mozilla Firefox dan Safari, seperti berdirinya moz untuk Mozilla. Ini hanya akan membuat perbatasan jika ada background-color/image tertentu pada objek. Untuk fungsionalitas pada browser yang lain, gunakan properti perbatasan-radius. MozBorderRadius untuk Mozilla and webkitBorderRadius untuk Safari.
Mari lihat contoh:Apa Itu Border-Radius?
Kodenya:
<div style="border: 1px solid #2C97F3; padding: 8px; background-color: #0F192A; color:#fff; -moz-border-radius:10px;">Apa Itu Border-Radius?</div>
<div style=" (kode ini membuat kotak border otomatis melebar)
border: 1px solid #2C97F3; (kode ini untuk memberi warna border seperti contoh diatas)
padding: 8px; (kode ini untuk memberi jarak antara tulisan ke border)
background-color: #0F192A; (kode ini untuk memberi warna latar)
color:#fff; (kode ini untuk memberi warna pada tulisan)
-moz-border-radius:10px; (kode ini memberi lengkungan pada ujung border sebesar 10px)
">
Apa Itu Border-Radius?
</div> (tutup kembali dengan div)
border: 1px solid #2C97F3; (kode ini untuk memberi warna border seperti contoh diatas)
padding: 8px; (kode ini untuk memberi jarak antara tulisan ke border)
background-color: #0F192A; (kode ini untuk memberi warna latar)
color:#fff; (kode ini untuk memberi warna pada tulisan)
-moz-border-radius:10px; (kode ini memberi lengkungan pada ujung border sebesar 10px)
">
Apa Itu Border-Radius?
</div> (tutup kembali dengan div)
Apa Itu Border-Radius?
Kodenya:
<span style="border: 1px solid #2C97F3; padding: 8px; background-color: #0F192A; color:#fff; -moz-border-radius:10px;">Apa Itu Border-Radius?</span>
(penjelasan nya sama dengan yang diatas, tetapi beda ny pada kata SPAN. Kode ini memberikan efek dimana border yang ditampilkan sesuai dengan kata kita....)
Lihat contoh diatas....
"Penggunaannya bisa dimodifikasi sebagai berikut"
Apa Itu Border-Radius?
<div style="border: 1px solid #2C97F3; padding: 8px; background-color: #0F192A; -moz-border-radius-topleft: 10px;">Apa Itu Border-Radius?</div>
Apa Itu Border-Radius?
<div style="border: 1px solid #2C97F3; padding: 8px; background-color: #0F192A; -moz-border-radius-topright: 10px; ">Apa Itu Border-Radius?</div>
Apa Itu Border-Radius?
<div style="border: 1px solid #2C97F3; padding: 8px; background-color: #0F192A; -moz-border-radius-bottomright: 10px;">Apa Itu Border-Radius?</div>
Apa Itu Border-Radius?
<div style="border: 1px solid #2C97F3; padding: 8px; background-color: #0F192A; -moz-border-radius-bottomleft: 10px;">Apa Itu Border-Radius?</div>
0 komentar:
Posting Komentar