Fungsi border-style (Property CSS)

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


A. Pengenalan border-style (Property CSS)


CSS border-style merupakan properti yang digunakan untuk mengubah gaya garis pada sebuah border atau garis pembatas.

B. Contoh Penggunaan border-style (Property CSS)


• Penggunaan border-style

Contoh:


<style>

.garisbatas {
border: 2px red;
border-style: solid;
}

</style>

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


Hasil:


Ini contoh kalimat.

Keterangan: solid merupakan border-style untuk menampilkan satu garis biasa.

C. Contoh Penerapan border-style


• Contoh Nomor 1


<p style="border: 3px blue;border-style:double;">Dua garis pembatas.</p>


Hasil:

Dua garis pembatas untuk double.


• Contoh Nomor 2


<p style="border:2px green;border-style: dotted;">Garis Titik - titik sebagai pembatas untuk dotted.</p>


Hasil:

Garis Titik - titik sebagai pembatas untuk dotted.


• Contoh Nomor 3


<style>

.garisbatas2 {
border: 5px;
border-style: dashed;
}

</style>

<div class="garisbatas2">Garis pembatas Titik - titik yang dibuat seperti persegi panjang.</div>


Hasil:


Garis pembatas Titik - titik yang dibuat seperti persegi panjang.


• Contoh Nomor 4


<p style="border: 5px;border-style:solid double dotted dashed;">Garis pembatas dengan banyak variasi atau jenis.</p>


Hasil:

Garis pembatas dengan banyak variasi atau jenis.

Keterangan: untuk bagian dalam penulisan border-style yaitu border-style:(Atas) (Kanan) (Bawah) (Kiri).

• Contoh Nomor 5


<p style="border: 7px blue;border-style: solid double dotted;">Garis dengan 3 variasi atau jenis.</p>


Hasil:

Garis dengan 3 variasi atau jenis.

Keterangan: untuk cara penulisannya yaitu border-style:(atas) (kanan dan kiri) (bawah)

• Contoh Nomor 6


<div style="border: 5px black;border-style: solid dotted;">Dua jenis atau variasi dari garis pembatas.</div>


Hasil


Dua jenis atau variasi dari garis pembatas.

Keterangan: untuk letak dalam penulisannya yaitu border-style: (atas dan bawah) (kanan dan kiri).

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.