Kursus Membuat Web

iklan

Outline CSS

Outline adalah garis disekitar elemen (outside border) untuk membuat elemen "stand out".

Property outline untuk mengatur style, color, dan width dari outline.

Contoh

p {
	border: 1px solid red;
	outline: green dotted thick
}

Membuat garis disekitar elemen (outline)

Contoh ini menunjukkan cara menggambar garis di sekitar elemen, outside border.

p {border: 1px solid red;}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Mengatur style dari outline

Contoh ini menunjukkan bagaimana mengatur style dari outline.

p {
	border: 1px solid red;
	outline-style: dotted;
	outline-color: #00ff00;
}

Mengatur color dari outline

Contoh ini menunjukkan bagaimana mengatur warna outline.

p.one {
	border: 1px solid red;
	outline-style: solid;
	outline-width: thin;
}
p.two {
	border: 1px solid red;
	outline-style: dotted;
	outline-width: 3px;
}

Mengatur width dari outline

Contoh ini menunjukkan bagaimana mengatur width dari outline.

Outline CSS

Outline adalah garis disekitar elemen (outside border) untuk membuat elemen "stand out".

Namun, property outline berbeda dengan property border.

Outline bukan bagian dari dimensi elemen; total elemen tidak dipengaruhi oleh width outline.

Box Outline
Gambar Box Outline

Semua Property Outline CSS

Property Keterangan Nilai
outline mengatur semua property outline dalam satu deklarasi outline-color, outline-style, outline-width, inherit
outline-color mengatur color dari outline color_name, hex_number, rgb_number, invert, inherit
outline-style mengatur style dari outline none, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit
outline-width mengatur width dari outline thin, medium, thick, length, inherit

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015