Garis tepi border pada css

Tutorial kali ini kita akan membahas tentang garis tepi / pembatas Element atau biasa disebut dengan border pada CSS . Helloh kemarenkan udah di bahas .. mengenai nama - nama border pada css . .??
yups . . namun pada pembahasan kita kali ini akan lebih mendetail , apabila berkenan melihat tutorial sebelumnya yaitu nama - nama / jenis pada border . jika sudah kita lanjut tutorial css border ini . adapun beberapa property dan value untuk menggunakan css border ini . silahkan anda lihat pada tabel dibawah ini .

property	keterangan	default value
border-style	model border	solid
border-color	warna border	black
border-width	tebal / besarnya border	1px

sedangkan untuk value anda bisa sesuaikan menggunakan :

value border-width	keterangan
px	menyesuaikan ketebalan border menggunakan pixels
em	menyesuaikan ketebalan border menggunakan em
pt	menyesuaikan ketebalan border menggunakan pt
cm	menyesuaikan ketebalan border menggunakan centi meter

baiklah kita akan buat box berukuran lebar 80px dan tinggi 80px sebagai berikut ini :

Text dengan di beri border atas 1px , kanan 3px , bawah 6px,kiri 9px

hasil di atas seperti berikut ini :

<style>.borderSize{margin:10px;padding:10px;border-style:solid;border-color:green;border-width:1px 3px 6px 9px;}</style>
<div class="borderSize">Text dengan di beri border atas 1px , kanan 3px , bawah 6px,kiri 9px</div>

lalu bagaimana cara merubah warna border tersebut warna - warni

anda juga dapat merubah / mengganti warna border tersebut dengan warna warni seperti berikut ini :

tulisan dengan warna border berwarna - warni

hasil di atas seperti berikut ini :

<div class="Tittle">lalu bagaimana cara merubah warna border tersebut warna - warni </div>
anda juga dapat merubah / mengganti warna border tersebut dengan warna warni seperti berikut ini :
<style>.borderWarna{margin:10px;padding:10px;border-style:solid;border-color:green blue yellow red;border-width:5px;}</style>
<div class="borderWarna">tulisan dengan warna border berwarna - warni </div>

warna hijau ( green ) untuk atas , biru untuk kanan ( blue ), kuning untuk bawah ( yellow ) , sedangkan merah untuk kiri ( red ) .
adapun trik untuk membuat segitiga menggunakan border seperti berikut ini :

hasil di atas seperti berikut ini :

<style>.SgtBorder{border-style:solid;border-width:50px;border-color:transparent transparent transparent blue;margin:0;padding:0;height:0;width:0;}</style>
<div class="SgtBorder"></div>

warna border bagian atas transparan ,warna border kanan transparan ,warna border bawah transparan ,warna border
kiri biru .
contoh lainnya seperti berikut ini :

mungkin anda ingin membaca artikel css border radius silahkan baca disini Rounded Corner sudut lengkung
nah dari sini pembahasan mengenai css border selesai semoga artikelnya ber manfaat ..
$(document).ready(function(){$("#contentRight").addClass("widgetCSS");});