Cara membuat garis / border menggunakan CSS

Kembali lagi bersama segalacoding, kali ini saya akan memberitahukan caranya gimana membuat garis dengan menggunakan CSS pada halaman web anda.
Sebelum membuatnya, saya memberitahukan beberapa kode garis CSS yaitu :

dotted - Memberikan efek garis putus - putus berbentuk kotak
dashed - Memberikan efek garis putus - putus berbentuk strip
solid - Memberikan garis yang padat / tebal
double - Memberikan garis yang padat / tebal tapi terdapat dua garis diatas dan dibawah
groove - Memberikan garis sebuah perbatasan beralur 3D
ridge - Memberikan garis menimbul sedikit pada tengah-tengah tepi
inset - Memberikan garis agak kedalam
outset - Memberikan garis agak keluar

Nah sudah tau kan beberapa kode garisnya. Gimana sih caranya membuatnya ?

Padahal caranya itu membuatnya sangat mudah. Ok langsung saja gimana caranya membuatnya, berikut caranya.

Persiapan :

1. Pastikan anda mempunyai text editor (Software untuk membuat dokumen HTML yang nantinya akan ada beberapa code CSS didalam HTML) contoh text editor : notepad ++, sublime text, Adobe Dreamweaver dll.

2. Browser yang ingin digunakan

Langkah - Langkah :
1. Buka text editor kalian

2. Berikut dibawah ini terdapat sebuah script sederhana untuk membuat border menggunakan CSS.

<style>
 p.dotted {border-style: dotted;}
 p.dashed {border-style: dashed;}
 p.solid {border-style: solid;}
 p.double {border-style: double;}
 p.groove {border-style: groove;}
 p.ridge {border-style: ridge;}
 p.inset {border-style: inset;}
 p.outset {border-style: outset;}
 p.none {border-style: none;}
</style>

3. Ok berikut dibawah ini barisan kode dengan HTMLnya begitupula dengan CSSnya.

<!DOCTYPE html>
<html>
 <head>
  <style>
   p.dotted {border-style: dotted;}
   p.dashed {border-style: dashed;}
   p.solid {border-style: solid;}
   p.double {border-style: double;}
   p.groove {border-style: groove;}
   p.ridge {border-style: ridge;}
   p.inset {border-style: inset;}
   p.outset {border-style: outset;}
   p.none {border-style: none;}
  </style>
 </head>
 <body>

  <h2>The border-style Property</h2>
  <p>This property specifies what kind of border to display:</p>

  <p class="dotted">Ini border Dotted</p>
  <p class="dashed">Ini border Dashed</p>
  <p class="solid">Ini border Solid</p>
  <p class="double">Ini border Double</p>
  <p class="groove">Ini border Groove</p>
  <p class="ridge">Ini border Ridge</p>
  <p class="inset">Ini border Inset</p>
  <p class="outset">Ini border Outset</p>
 </body>
</html>

4. Biasa kalau sudah anda dapat menyimpannya dengan border.html lalu double klik saja dan lihat hasilnya di browser.

Penjelasan :

1. Diatas adalah script / barisan kode sederhana

2. Tingkat kesulitan dalam pembuatan termasuk rendah

Mudahkan cara membuatnya, anda baru saja membuat sebuah garis / border dengan dokumen HTML dan CSS. Jangan lupa tinggalkan sebuah komentar agar lebih semangat membuat sebuah artikel.

Ok mungkin segitu saja dari saya, abapila ada tutur kata saya yang kurang berkenan di hati para pembaca mohon maafkan saya. Terima Kasih

- Segalacoding

Denny S

Saya senang dengan namanya dunia teknologi. Maka dari itu saya masih ingin belajar tentang pemrograman berbasis web agar ilmu saya menjadi bertambah.
Terima Kasih

Segala Coding

Cara membuat garis / border menggunakan CSS

Denny S

Artikel Terkait