sampul-skrip-css-Nyekrip.com

Skrip berikut ini adalah bagian dari tutorial ” Tips Cara Membuat Border dengan CSS “, silahkan anda uji coba dengan mengkopi paste atau ketikkan skrip berikut dalam teks editor anda. Berikutnya anda jalankan melalui browser kesayangan anda.

Untuk lebih jelasnya dalam memahami dan menggunakan skrip berikut, silahkan anda kunjungi Tips Cara Membuat Border dengan CSS.

<!-- Skrip Border Style -->
<html>
  <head>
    <title>Nyekrip: Belajar Border CSS</title>
    <style> 
		p.none{border-style: none} /* Defines no border */
		p.solid{border-style: solid}
		p.double{border-style: double}
		p.dotted{border-style: dotted}
		p.dashed{border-style: dashed}
		p.groove{border-style: groove}
		p.inset{border-style: inset}
		p.outset{border-style: outset}
		p.ridge{border-style: ridge}
		p.hidden{border-style: hidden}
    </style>
  </head>
  <body>
    <p class="none">Paragraf kesatu nih, pakai border style none</p>
    <p class="solid">Paragraf kesatu nih, pakai border style solid</p>
    <p class="double">Paragraf kesatu nih, pakai border style double</p>
    <p class="dotted">Paragraf kesatu nih, pakai border style dotted</p>
    <p class="dashed">Paragraf kesatu nih, pakai border style dashed</p>
    <p class="groove">Paragraf kesatu nih, pakai border style groove</p>
    <p class="inset">Paragraf kesatu nih, pakai border style inset</p>
    <p class="outset">Paragraf kesatu nih, pakai border style outset</p>
    <p class="ridge">Paragraf kesatu nih, pakai border style ridge</p>
    <p class="hidden">Paragraf kesatu nih, pakai border style hidden</p>
  </body>
</html>
<!-- Skrip Border Width -->
<html>
  <head>
    <title>Nyekrip: Belajar Border CSS</title>
    <style> 
		p.lebar{border-style:solid;
		  border-left-width:10px;
		  border-top-width:20px;
		  border-right-width:30px;
		  border-bottom-width:40px;} 
    </style>
  </head>
  <body>
    <p class="lebar">Paragraf nih, dengan lebar border yang berbeda pada tiap sisi</p>
  </body>
</html>
<!-- Skrip Border Color -->
<html>
  <head>
    <title>Nyekrip: Belajar Border CSS</title>
    <style> 
		p.pertama {
		border-style: solid;
		border-color: red;
		border-width:10px;
		}

		p.kedua {
		border-style: solid;
		border-color: #98bf21;
		border-width:10px;
		}

		p.ketiga {
		border-style: solid;
		border-color: rgb(252,217,197);
		border-width:10px;
		}
    </style>
  </head>
  <body>
    <p class="pertama">Paragraf nih, dengan border bewarna merah</p>
    <p class="kedua">Paragraf nih, dengan border bewarna hijau</p>
    <p class="ketiga">Paragraf nih, dengan border bewarna merah muda</p>
  </body>
</html>

About The Author

Comments

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.