Cara menambahkan garis sisi pada teks atau gambar dengan css border all element

Mempercantik tampilan web / blog merupakan suatu kewajiban yang harus dilakukan oleh para blogger ataupun web creator agar para pengunjung betah dan nyaman melihat web /blog yang dibuat. Untuk memformat tulisan / teks dengan kode HTML mungkin sudah banyak yang menguasainya seperti menambah garis bawah, memiringkan tulisan, dan menebalkan tulisan.

Pada kesempatan ini saya membagikan bagaimana cara menambahkan garis sisi / garis tepi pada teks ataupun gambar dengan memanfaatkan css border all element yang memiliki banyak variasi warna garis. Garis tepi biasa juga digunakan untuk mengurung teks yang dianggap sangat penting. Berikut ini cara menambahkan garis sisi pada teks atau gambar dengan css border all element:

contoh gambar yang bergaris tepi

Untuk mengatur gaya garis / border styles untuk semua sisi, maka pada css nya anda harus memasukan border-width, border-style, and border-color properties. anda pun juga dapat menggunakan border property untuk semuanya.

1. Berikut contoh penggunaan border-width, border-style, and border-color:

<p style="border-width:1px;border-style:solid;border-color:blue;">Teks ini menggunakan border-width, border-style, and border-color properties .</p>

Hasilnya sebagai berikut:

Teks ini menggunakan border-width, border-style, and border-color properties .

2. Contoh penggunaan Border style yang berisi  border-width, border-style, and border-color yang disederhanakan:

<p style="border:1px solid blue;">Teks ini menggunakan pengaturan border styles yang diaplikasikan menggunakan border property.</p>

Hasil tampilannya:

Teks ini menggunakan pengaturan border styles yang diaplikasikan menggunakan border property.

3. Contoh penerapan Border Style lainnya:

<p style="border:4px solid blue;">Teks ini menggunakan border style 'solid'.</p>
hasilnya:

Teks ini menggunakan border style 'solid'.

<p style="border:4px dotted blue;">Teks ini menggunakan border style 'dotted'.</p>
hasilnya:

Teks ini menggunakan border style 'dashed'.

<p style="border:4px dashed blue;">Teks ini menggunakan border style 'dashed'.</p>
hasilnya:

Teks ini menggunakan border style 'dashed'.

<p style="border:4px double blue;">Teks ini menggunakan border style 'double'.</p>
hasilnya:

Teks ini menggunakan border style 'double'.

<p style="border:4px groove blue;">Teks ini menggunakan border style 'groove'.</p>
hasilnya:

Teks ini menggunakan border style 'groove'.

<p style="border:4px ridge blue;">Teks ini menggunakan border style 'ridge'.</p>
hasilnya:

Teks ini menggunakan border style 'ridge'.

<p style="border:4px inset blue;">Teks ini menggunakan border style 'inset'.</p>
hasilnya:

Teks ini menggunakan border style 'inset'.

<p style="border:4px outset blue;">Teks ini menggunakan border style 'outset'.</p>
hasilnya:

Teks ini menggunakan border style 'outset'.

<p style="border:4px hidden blue;">Teks ini menggunakan border style 'hidden'.</p>
hasilnya:

Teks ini menggunakan border style 'hidden'.

Itulah sedikit ilmu yang dapat saya bagikan tentang Cara menambahkan garis sisi pada teks atau gambar dengan css border all element karena keterbatasan saya juga. Bila ada kesalahan mohon untuk dimaafkan.