Belajar Kode CSS & Desain Blog: CSS Border Properties

CSS Border Properties menjadi satu unsur yang hampir tidak pernah lepas dari css box model. Border properties banyak dmanfaatkan untuk memperindah box, membedakan sebuah box dengan box lain serta memperjelas batas sebuah box. Ada tiga properti css border yang masing-masing mengatur ketebalan border, warna border dan style border. Masing masing dapat digunakan di ke-empat sisi box (top, right, bottom dan left).

border-width property :
border-width property berfungsi untuk mengatur ketebalan border. Ada beberapa satuan Value/nilai yang bisa dipergunakan seperti pixel, pt, em, thick, thin, medium dll.

border-color property :
border-color property berfungsi untuk mengatur warna border. Warna yang bisa digunakan adalah dalam bentuk hexadecimal/hex, color names, rgb, rgba, hsl, hsla, none, inherit dll.
border-color style :
Border style property selain digunakan sebagai pembatas box, style yang beraneka-ragam juga banyak dimanfaatkan untuk menciptakan keindahan. Beberapa value yang digunakan adalah: ridge, solid, dotted, dll.

Border Properties	value	contoh	Cara Penulisan Border
border-width	px	border-width: 10px;	border-top-width:...px;
	em	border-top-width: 1.4em;	border-top-style: solid;
	%	border-width: 1%;	border-top-color: red;
	medium	border-width: medium;
	thin	border-bottom-width:thin;	border-right-width: 2.5em;
	thick	border-right-width: thick;	border-right-style: dotted;
border-style	dashed	border-style: dashed;	border-right-color: #f00;
	dotted	border-left-style: dotted;
	double	border-right-style: double;	border-bottom-width: 22pt;
	groove	border-style: groove;	border-bottom-style: ridge;
	hidden	border-style: hidden;	border-bottom-color: rgb(180,0,0);
	inherit	border-bottom-style: inherit;
	inset	border: inset 20px blue;	border-left-width: thick;
	none	border-style: none;	border-left-style: double;
	ridge	border-top: ridge 8px;	border-left-color: rgba(90,0,190,0.2);
border-color	hex	border-color: #fff;
	color names	border-top-color: green;	border: solid red 30px;
	rgb	border-left-color: rgb(0,100,100);	border: 12px double orange;
	rgba	border:solid rgba(0,0,0,0.3) 10px;	border: 2em #000 ridge;
	hsl	border-left: solid hsl(100,50%,25%);
	hsla	border:double 2em hsla(45,20%,85%,0.6);	border: none; border: inherit;

Di bawah ini telah disertakan beberapa box dengan berbahgai macam border property. Edit dan lakukan beberapa perubahan pada background dan yang lain untuk lebih memahami tentang kode css.

Please click the button to display. Continue with editing code and click to see the results!

<!DOCTYPE html>
<html>
<title>CSS Border Properties</title>
<head>  
<style type="text/css">
body{ 
   color:#000;
   font-family:Arial;
   font-size:14px;
   padding:0;
   margin:0 auto;
   background:#444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_cFX_-l9e-ksZHJFLqFMkfNhbbGr26qQ4ZIY00ctk3K57eMcUtHICeDJAPFylfgCIJZ__6HTF8dfsJXj9gDudgR0eA3cnwQuj176X3n6cq-3QscNNPDsu7geDeEMJA7XEbznTztJWsbU/);
   background-size:70% auto;
   background-repeat:no-repeat;
   background-position:top center;
   background-attachment:fixed;   
}
pre{overflow:auto;max-width:100%;}
b{font-weight:bold;color:brown;font-size:16px;}
.box-3 pre b,.box-6 pre b{color:yellow;}
.box-6 pre{font-size:16px;color:lime;}
div{
      text-align:justify;
      background:lightyellow;
}
div{
      margin:40px auto;
      width:400px;
      padding:20px;
}
.box-1{
      border:20px solid red;
}
.box-2{
      border:20px double green;
}
.box-3{
      border:1px dotted #fff;
      background:rgba(0,0,0,0.6);
      color:#fff;
}
.box-4{
      border:thin solid yellow;
}
.box-5{
      border:medium solid rgb(255,0,0);
}

.box-6{
      border:20px solid rgba(255,0,255,0.3);
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2-yqy9f0hMnewl-m_gle8HXQAjFkvFVrmeCfdukwj5lNPSEa7QYcLx5jeJyKyuv1vDShZbpCbPSPV4u9NDNwMFR4LOvB5OPjRT4XGUjiujT4Di2U6XSu8ga3Cth7ZDqsKdFydWtLwe5w/) no-repeat top center;
}

</style>
</head>
<body>

<div class="box-1"><pre><b>div.box-1</b>{
      margin:40px auto;
      width:400px;
      padding:20px;
}</pre>
</div>

<div class="box-2"><pre><b>div.box-2</b>{
      margin:40px auto;
      width:400px;
      padding:20px;
      border:20px double green;
}</pre>
</div>

<div class="box-3"><pre><b>div.box-3</b>{
      margin:40px auto;
      width:400px;
      padding:20px;
      border:1px dotted #fff;
      background:#444;
      color:#fff;
}</pre>
</div>

<div class="box-4"><pre><b>div.box-4</b>{
      margin:40px auto;
      width:400px;
      padding:20px;
      border:thin dotted #fff;
}</pre>
</div>

<div class="box-5"><pre><b>div.box-5</b>{
      margin:40px auto;
      width:400px;
      padding:20px;
      border:medium solid rgb(255,0,0);
}</pre>
</div>

<div class="box-6"><pre><b>div.box-6</b>{
      margin:40px auto;
      width:400px;
      padding:20px;
      border:20px solid rgba(255,0,255,0.3);
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2-yqy9f0hMnewl-m_gle8HXQAjFkvFVrmeCfdukwj5lNPSEa7QYcLx5jeJyKyuv1vDShZbpCbPSPV4u9NDNwMFR4LOvB5OPjRT4XGUjiujT4Di2U6XSu8ga3Cth7ZDqsKdFydWtLwe5w/) no-repeat top center;
}</pre>
</div>

</body> 
</html>

Belajar Kode CSS & Desain Blog

Halaman

CSS Border Properties

Tidak ada komentar:

Posting Komentar

Archive Blog C l o s e

Arsip Blog

My Profile C l o s e

Mengenai Saya

Follower C l o s e

Follower

RSS C l o s e

Label C l o s e

Label

Halaman

date_replace('8.15.2012');