CSS Border

Daftar isi

Post terkait : Border Radius

Border (garis batas elemen HTML)

Elemen HTML dengan border

<p>Ini paragraf dengan border.</p>
<span>Ini teks span dengan border.</span>

<style>
 p{border: 1px solid #333}
 span{border: 1px solid #333}
</style>

Teks dibawah ini berada didalam elemen dengan border

Ini paragraf dengan border.

Ini teks span dengan border.

Menentukan tampilan border

Sorot box untuk melihat kode CSSnya

1. borderElemen dengan border penuh

   {border:2px solid #999}

2. leftElemen dengan border kiri

   {border-left:2px solid #999}

3. rightElemen dengan border kanan

   {border-right:2px solid #999}

4. topElemen dengan border atas

   {border-top:2px solid #999}

5. bottomElemen dengan border bawah

   {border-bottom:2px solid #999}

Border style

Jenis border style atau gaya tampilan yang bisa diterapkan pada border:

1. dotted

   Dotted (border titik-titik)
   {border:2px dotted #999}

2. dashed

   Dashed (border garis putus-putus) {border:2px dashed #999}

3. solid

   Solid (border garis utuh) {border:2px solid #999}

4. double

   Double (border ganda) {border:6px double #999}

5. groove

   3D grooved border. {border:6px groove #999}

6. ridge

   3D ridged border. {border:6px ridge #999}

7. inset

   3D inset border. {border:6px inset #999}

8. outset

   3D outset border. {border:6px outset #999}

9.    none - tanpa border.

   {border:none;}

10.    hidden - border tersembunyi.

    {border:hidden;}

Post terkait : Border Radius

⇐ Sebelumnya

Selanjutnya ⇒