Macam CSS Border

Css border atau biasa disebut Css border properties ini bisa memungkinkan kita untuk menentukan gaya dan warna border suatu elemen. Di sini akan saya berikan beberapa contoh yang biasa digunakan dan mungkin saja bisa berguna dikemudian hari.

BEBERAPA MACAM CSS BORDER

1. none 2. dotted 3. dashed 4. solid 5. double 6. groove 7. ridge 8. inset 9. outset

: Tidak mendefinisikan garis perbatasan : Mendefinisikan perbatasan garis titik-titik. : Mendefinisikan perbatasan garis putus-putus. : Mendefinisikan perbatasan garis penuh. : Mendefinisikan perbatasan garis ganda. : Mendefinisikan perbatasan garis berlekuk 3D. : Mendefinisikan perbatasan garis bergerigi 3D. : Mendefinisikan perbatasan garis inset 3D. : Mendefinisikan perbatasan garis outset 3D.

Cara menggunakannya: 

1. None

<p style="border: 3px none; #000000; padding: 20px;">Tidak mendefinisikan garis perbatasan</p>

2. Dotted

<p style="border: 3px dotted; #000000; padding: 20px; align: center;"> Mendefinisikan perbatasan garis titik-titik.</p>

Mendefinisikan perbatasan garis titik-titik.

3. Dashed

<p style="border:3px dashed; #000000; padding: 20px;"> Mendefinisikan perbatasan garis putus-putus.</p>

Mendefinisikan perbatasan garis putus-putus.

4. Solid

<p style="border:3px solid; #000000; padding: 20px;"> Mendefinisikan perbatasan garis penuh.</p>

Mendefinisikan perbatasan garis penuh.

5. Double

<p style="border: 5px double; #000000;padding: 20px;"> Mendefinisikan perbatasan garis ganda.</p>

Mendefinisikan perbatasan garis ganda.

6. Groove

<p style="border: 10px groove; #000000; padding: 20px;"> Mendefinisikan perbatasan garis berlekuk 3D.</p>

Mendefinisikan perbatasan garis berlekuk 3D.

7. Ridge

<p style="border: 10px ridge; #000000; padding: 20px;"> Mendefinisikan perbatasan garis bergerigi 3D.</p>

Mendefinisikan perbatasan garis bergerigi 3D.

8. Inset

<p style="border: 10px inset; #000000; padding: 20px;"> Mendefinisikan perbatasan garis inset 3D.</p>

Mendefinisikan perbatasan garis inset 3D.

9. Outset

<p style="border: 10px outset; #FF3300; padding: 20px;"> Mendefinisikan perbatasan garis outset 3D.</p>

Mendefinisikan perbatasan garis outset 3D.

Catatan :

- untuk merubah warna border, sobat hanya merubah kode # bisa dilihat di SINI
- untuk merubah ketebalan border, tinggal menaikkan  besarnya px saja

semoga bermanfaat buat sobat ^^