Fungsi border-radius (Property CSS)

BERANDA > FUNGSI DAN KEGUNAAN PROPERTI CSS > Fungsi border-radius (Property CSS)


A. Pengenalan border-radius (Property CSS)


CSS border-radius merupakan properti yang digunakan untuk memberi lekukan pada tiap ujung boder.

B. Contoh Penggunaan border-radius (Property CSS)


• Penggunaan border-radius

Contoh:


<style>

.garisbatas {
border: solid;
border-radius: 20px;
}

</style>

<div class="garisbatas">Ini contoh kalimat.</div>


Hasil:


Ini contoh kalimat. Garis melengkung sebesar 20px.


C. Contoh Penerapan border-radius


• Contoh Nomor 1


<p style="border: double; border-radius:20px 50px;">Dua garis pembatas.</p>


Hasil:

Dua garis pembatas.


Keterangan: untuk lengkungan secara khusus yaitu border-radius:(kiri-atas dan kanan bawah) (kanan-atas dan kiri-bawah);.

• Contoh Nomor 2


<p style="border: dotted; border-radius:10px 30px 60px;">Garis Titik - titik sebagai pembatas.</p>


Hasil:

Garis Titik - titik sebagai pembatas.


Keterangan: untuk lengkungan secara khusus yaitu border-radius:(kiri-atas) (kanan-atas dan kiri-bawah) (kanan-bawah);.

• Contoh Nomor 3


<style>

.garisbatas2 {
border: 5px solid;
border-radius: 10px 30px 50px 70px;
}

</style>

<div class="garisbatas2">Satu garis batas dengan ketebalan 5 piksel.</div>


Hasil:


Satu garis batas dengan ketebalan 5 piksel.


Keterangan: untuk lengkungan secara khusus yaitu border-radius:(kiri-atas) (kanan-atas) (kanan-bawah) (kiri-bawah);.

Tidak ada komentar:

Posting Komentar

Jangan lupa memberikan saran dan laporan bila terdapat sesuatu yang ingin kamu sampaikan.

Gunakan kata - kata yang sopan untuk mengomentar dan mengkritik.

Katakan bila ingin ada materi atau pembahasan yang ingin ditambahkan atau yang kurang lengkap.