Macam-macam Nama Garis Border, Kode, dan Cara Penerapan di Blog/Website

Kode CSS & HTML Garis Border dan Penerapannya. Untuk mendesain sebuah blog/website atau konten-konten yang ada pada postingan, terkadang kita memerlukan beberapa jenis border agar mendapatkan hasil yang lebih indah dan menarik.

Kumpulan Kode Garis Border dan Cara Penerapan

Pada umumnya garis border dapat digunakan untuk beberapa kepentingan dalam desain grafis html, seperti contohnya untuk: memberikan garis batas pada gambar, memisahkan suatu elemen, mengelompokkan beberapa konten penting dan lain sebagainya.

Pada artikel ini spot akan menuliskan contoh garis border secara lengkap beserta kodenya, dengan maksud dan tujuan agar nanti setelah dipelajari dapat langsung kamu praktekkan di blog/website kesayangan kamu.

Langsung saja berikut ini beberapa jenis border dan lengkap dengan kode mentahnya. Disini spot akan menulis border dengan bantuan tag DIV. Cekidot, silahkan langsung disedot.

1. Border Solid

Garis border ukuran 1px, model solid, warna black

Kodenya:
<div style="border:1px solid black;">isi dengan teks atau gambar</div>

2. Border Ridge

Garis border ukuran 2px, model ridge, warna orange

Kodenya:
<div style="border:2px ridge orange;">isi dengan teks atau gambar</div>

3. Border Groove

Garis border ukuran 3px, model groove, warna red

Kodenya:
<div style="border:3px groove red;">isi dengan teks atau gambar</div>

4. Border Dashed

Garis border ukuran 4px, model dashed, warna green

Kodenya:
<div style="border:4px dashed green;">isi dengan teks atau gambar</div>

5. Border Dotted

Garis border ukuran 5px, model dotted, warna grey

Kodenya:
<div style="border:5px dotted grey;">isi dengan teks atau gambar</div>

6. Border Inset

Garis border ukuran 6px, model inset, warna yellow

Kodenya:
<div style="border:6px inset yellow;">isi dengan teks atau gambar</div>

7. Border Outset

Garis border ukuran 7px, model outset, warna blue

Kodenya:
<div style="border:7px outset blue;">isi dengan teks atau gambar</div>

8. Border Double

Garis boder ukuran 8px, model double, warna lime

Kodenya:
<div style="border:8px double lime;">isi dengan teks atau gambar</div>

9. Border Solid Latar Hitam

Garis border ukuran 1px, model solid, warna red, background black, teks white

Kodenya:
<div style="border:1px solid red;background:black;color:white;">isi dengan teks atau gambar</div>

10. Border Double Latar Gambar

Garis border ukuran 5px, model double, warna blue, background image, teks lime

Kodenya:
<div style="border:5px double blue;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQoZrZp9_8j9QL_fIdSo_wu9IRYzRB3hymv2h8pj8g7GEqbFJPU86VOdlRpF6cU-YEnJW7QaUqgY-xZwTf7c1jCSN9HPQyM3ljdrNEKH2uyEBjYuGCNTwIZTOVhBn7QpSFVEX-XAaEq2bS/s1600/PicsArt_10-04-04.33.07.png) no-repeat;background-size:100% 100%;color:lime;">isi dengan teks atau gambar</div>

11. Border Left

Border hanya dengan garis di kiri saja

Kodenya:
<div style="border-left:7px solid red;">isi dengan teks atau gambar</div>

12. Border Top

Border hanya dengan garis di atas saja

Kodenya:
<div style="border-top:7px solid red;">isi dengan teks atau gambar</div>

13. Border Right

Border hanya dengan garis di kanan saja

Kodenya:
<div style="border-right:7px solid red;">isi dengan teks atau gambar</div>

14. Border Bottom

Border hanya dengan garis di bawah saja

Kodenya:
<div style="border-bottom:7px solid red;">isi dengan teks atau gambar</div>

15. Border Radius

Garis lingkar dengan radius 100%

Kodenya:
<div style="border:2px ridge blue;border-radius:100%;text-align:center;">isi dengan teks atau gambar</div>

16. Border Radius Top Left

Garis lingkar di kiri atas dengan radius 20px

Kodenya:
<div style="border:2px ridge blue;border-top-left-radius:20px;text-align:center;">isi dengan teks atau gambar</div>

17. Border Radius Top Right

Garis lingkar di kanan atas dengan radius 30px

Kodenya:
<div style="border:2px ridge blue;border-top-right-radius:30px;text-align:center;">isi dengan teks atau gambar</div>

18. Border Radius Bottom Right

Garis lingkar di kanan bawah dengan radius 40px

Kodenya:
<div style="border:2px ridge blue;border-bottom-right-radius:40px;text-align:center;padding:0px 20px;">isi dengan teks atau gambar</div>

19. Border Radius Bottom Left

Garis lingkar di kiri bawah dengan radiua 50px

Kodenya:
<div style="border:2px ridge blue;border-bottom-left-radius:50px;text-align:center;padding:0px 20px;">isi dengan teks atau gambar</div>

20. Border Radius 20 30 40 50

Garis border atas kiri 15px, atas kanan 20px, bawah kanan 35px, dan bawah kiri 40px

Kodenya:
<div style="border:5px double red;border-top-left-radius:15px;border-top-right-radius:20px;border-bottom-right-radius:35px;border-bottom-left-radius:40px;text-align:center;padding:0px 20px;">isi dengan teks atau gambar</div>

# BONUS #
Selain 20 jenis berder di atas, kamu juga bisa membuat garis hanyan dengan menuliskan kode html berikut ini.

---

Kodenya:
<hr />

Nah itu dia 20 macam kode garis border yang bisa spot bagikan. Untuk selebihnya kamu dapat mempelajari dan mengkreasikan atau memodif sendiri dengan imajinasi kamu sehingga mendapatkan hasil yang maksimal.

Share this post