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

SPOTROID - 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.

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 sobat praktekkan di blog/website kesayangan sobat.

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

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

2. Border Ridge

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

3. Border Groove

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

4. Border Dashed

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

5. Border Dotted

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

6. Border Inset

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

7. Border Outset

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

8. Border Double

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

9. Border Solid Latar Hitam

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

10. Border Double Latar Gambar

Kodenya:
<div style="border:5px double blue;background:url(https://1.bp.blogspot.com/-WPYepYHfqZY/WdSklEQJaDI/AAAAAAAAA6U/PPvZjfu8IvYfQuGxFxMCe7ZbTLNyLVjrQCPcBGAYYCw/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

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

12. Border Top

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

13. Border Right

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

14. Border Bottom

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

15. Border Radius

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

16. Border Radius Top Left

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

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

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

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

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>

Maaf!! Tidak dapat menampilkan DEMO, karena tidak diperbolehkan dalam dokumen AMP

# BONUS #
Selain 20 jenis berder di atas, sobat 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 sobat dapat mempelajari dan mengkreasikan atau memodif sendiri dengan imajinasi sobat sehingga mendapatkan hasil yang maksimal.

Salam sukses...
BLOG: Awak Blang Awe

YUK IKUTAN BERPARTISIPASI
Anda suka dengan artikel di atas? Bagikan!
Dengan 1x Anda membagikan artikel blog ini, artinya Anda telah ikut serta dalam menunjang berkembangnya blog "Spot Teknologi Android". Sekecil apapun usaha partisipasi Anda sangat berarti bagi blog ini, terimakasih.