Outline adalah garis yang berada di luar batas/border suatu elemen HTML.
CSS Outline
Garis outline adalah garis yang digambar di sekitar elemen, dan terletak di luar garis batas/border, tujuannya untuk membuat elemen terlihat lebih menonjol.
CSS memiliki beberapa properti untuk garis outline:
- outline-style
- outline-color
- outline-width
- outline-offset
- outline
CSS Outline Style
Properti outline-style
menentukan jenis outline yang akan dipakai, dan dapat memiliki salah satu dari nilai berikut:
dotted
– Mendefinisikan garis outline titik-titikdashed
– Mendefinisikan garis outline putus-putussolid
– Mendefinisikan garis outline lebih padat seperti garis menggunakan bold pointdouble
– Mendefinisikan 2 garis outline yang solid/padatgroove
– Mendefinisikan garis outline tampak seolah-olah berukirridge
– Mendefinisikan garis outline tampak seperti kebalikan dari grooveinset
– Membuat garis outline sehingga membuat elemen terlihat seperti kotak yang tertanamoutset
– Mendefinisikan garis outline tampak keluar menonjolnone
– Nilai untuk tidak memperlihatkan garis outlinehidden
– Mendefinisikan garis outline menjadi tidak terlihat
Contoh berikut menampilkan nilai outline-style
yang berbeda:
Contoh
Membuat outline style dengan garis yang berbeda :
<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color: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;}
</style>
</head>
<body>
<h2>Properti outline-style</h2>
<p class="dotted">Garis outline dotted</p>
<p class="dashed">Garis outline dashed putus</p>
<p class="solid">Garis outline yang solid</p>
<p class="double">Garis outline double</p>
<p class="groove">Garis outline groove. Efeknya bergantung pada nilai warna garis luar.</p>
<p class="ridge">Garis outline ridge. Efeknya bergantung pada nilai warna garis luar.</p>
<p class="inset">Garis outline inset. Efeknya bergantung pada nilai warna garis luar.</p>
<p class="outset">Garis outline outset. Efeknya bergantung pada nilai warna garis luar.</p>
</body></html>
CSS Outline Width
Properti outline-width
menentukan lebar garis outline, dan dapat memiliki salah satu dari nilai berikut:
- thin (biasanya 1px)
- medium (biasanya 3px)
- thick (biasanya 5px)
- Ukuran tertentu dalam px, pt, cm, em, dll
Contoh berikut menampilkan beberapa garis outline dengan lebar berbeda:
Garis tipis.
Garis sedang.
Garis tebal.
Baris tebal 4px.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
p.ex2 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
}
p.ex3 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thick;
}
p.ex4 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
}
</style>
</head>
<body>
<h2>Properti outline-width</h2>
<p class="ex1">Garis tipis</p>
<p class="ex2">Garis besar sedang</p>
<p class="ex3">Garis tebal</p>
<p class="ex4">Garis tepi setebal 4px</p>
</body></html>
CSS Outline Color
Properti outline-color
digunakan untuk mengatur warna garis outline.
Warna dapat diatur oleh:
- name – menentukan nama warna, seperti “red”
- HEX – menentukan nilai hex, seperti “#ff0000”
- RGB – menentukan nilai RGB, seperti “rgb(255,0,0)”
- HSL – menentukan nilai HSL, seperti “hsl(0, 100%, 50%)”
- invert – melakukan inversi warna (yang memastikan bahwa garis outline terlihat, terlepas dari warna latar belakang)
Contoh berikut menunjukkan beberapa garis outline yang berbeda dengan warna yang berbeda. Perhatikan juga bahwa elemen ini juga memiliki border hitam tipis selain garis outline:
Outline merah solid .
Garis biru dotted .
Outline abu-abu outset .
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: red;
}
p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: blue;
}
p.ex3 {
border: 2px solid black;
outline-style: outset;
outline-color: grey;
}
</style>
</head>
<body>
<h2>Properti outline-color</h2>
<p>Properti outline-color digunakan untuk mengatur warna garis outline.</p>
<p class="ex1">Garis outline merah solid.</p>
<p class="ex2">Garis outline biru dotted.</p>
<p class="ex3">Garis outline abu-abu outset.</p>
</body></html>
Nilai HEX
Warna garis outline juga dapat ditentukan menggunakan nilai HEX (heksadesimal):
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: #ff0000; /* red */
}
p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: #0000ff; /* blue */
}
p.ex3 {
border: 2px solid black;
outline-style: solid;
outline-color: #bbbbbb; /* grey */
}
</style>
</head>
<body>
<h2>Properti outline-color</h2>
<p>Warna garis outline juga dapat ditentukan menggunakan nilai heksadesimal (HEX):</p>
<p class="ex1">Garis outline merah solid.</p>
<p class="ex2">Garis outline biru dotted.</p>
<p class="ex3">Garis outline abu-abu solid.</p>
</body></html>
Nilai RGB
Atau dengan menggunakan nilai RGB:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: rgb(255, 0, 0); /* red */
}
p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: rgb(0, 0, 255); /* blue */
}
p.ex3 {
border: 2px solid black;
outline-style: solid;
outline-color: rgb(187, 187, 187); /* grey */
}
</style>
</head>
<body>
<h2>Properti outline-color</h2>
<p>Warna garis outline juga dapat ditentukan menggunakan nilai RGB:</p>
<p class="ex1">Garis outline merah solid.</p>
<p class="ex2">Garis outline biru dotted.</p>
<p class="ex3">Garis outline abu-abu solid.</p>
</body></html>
Nilai HSL
Dan juga dapat menggunakan nilai HSL:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* red */
}
p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: hsl(240, 100%, 50%); /* blue */
}
p.ex3 {
border: 2px solid black;
outline-style: solid;
outline-color: hsl(0, 0%, 73%); /* grey */
}
</style>
</head>
<body>
<h2>Properti outline-color</h2>
<p>Warna outline juga dapat ditentukan menggunakan nilai HSL:</p>
<p class="ex1">Garis outline merah solid.</p>
<p class="ex2">Garis outline dotted.</p>
<p class="ex3">Garis outline abu-abu solid.</p>
</body></html>
CSS Outline – Properti Singkat/Gabungan
Properti outline
adalah properti singkat/gabungan untuk mengatur beberapa properti outline berikut:
outline-width
outline-style
(wajib)- outline-color
Properti outline
ditetapkan sebagai satu, dua, atau tiga nilai dari daftar di atas. Urutan nilai tidak penting.
Contoh berikut menampilkan beberapa garis outline yang ditentukan dengan properti singkatan outline
:
Garis dashed.
Outline merah dotted .
Outline kuning solid 5px.
Garis ridge merah muda tebal.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
</style>
</head>
<body>
<h2>Properti outline</h2>
<p class="ex1">Garis outline dashed.</p>
<p class="ex2">Garis outline merah dotted.</p>
<p class="ex3">Garis outline kuning solid 5px.</p>
<p class="ex4">Garis outline merah jambu dan tebal.</p>
</body></html>
CSS Outline Offset
Properti outline-offset
menambahkan ruang antara garis outline dan garis batas/border suatu elemen. Ruang yang ditambahkan ini ditampilkan transparan.
Contoh berikut menentukan ruang antara garis outline dan garis border sebesar 15px:
Paragraf ini memiliki ruang antara garis outline dari garis batas sebesar 15px.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
</style>
</head>
<body>
<h2>Properti outline-offset</h2>
<p>Paragraf ini memiliki ruang antara garis outline dari garis batas sebesar 15px.</p>
</body></html>
Contoh berikut menunjukkan bahwa ruang garis outline dan garis border ditampilan transparan:
Paragraf ini memiliki ruang antara garis outline dari garis batas sebesar 15px.< /p>
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 30px;
background:yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
</style>
</head>
<body>
<h2>Properti outline-offset</h2>
<p>Paragraf ini memiliki ruang antara garis outline dari garis batas sebesar 15px.</p>
</body></html>
Referensi Semua Properti CSS Outline
Properti Outline CSS
Contoh
Menetapkan garis outline di sekitar elemen <h2> dan elemen <div> :
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border: 1px solid red;
outline: 5px dotted green;
}
div.a {
border: 1px solid red;
outline: 2px dashed blue;
}
</style>
</head>
<body>
<h1>Properti outline</h1>
<h2>Judul dengan garis outline dotted hijau sebesar 5px</h2>
<div class="a">Elemen div dengan garis outline dashed biru sebesar 2 px. Perhatikan juga bahwa garis outline berada di luar garis border.</div>
</body></html>
Definisi dan Penggunaan
Outline adalah garis yang berada diluar garis border suatu elemen.
Properti CSS outline-color
Contoh
Menetapkan warna untuk garis outline:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: solid;
outline-color: coral;
}
div.a {
outline-style: solid;
outline-color: coral;
}
div.b {
border: 1px solid black;
outline-style: solid;
outline-color: coral;
}
</style>
</head>
<body>
<h1>Properti outline-color</h1>
<h2>Judul dengan garis outline berwarna</h2>
<div class="a">Warna garis online dapat ditentukan dengan nama warna.</div>
<br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
<p><strong>Catatan:</strong> Properti outline-color tidak berfungsi jika digunakan sendiri. Gunakan properti outline-style terlebih dahulu.</p>
</body></html>
Definisi dan Penggunaan
Properti outline-color
menentukan warna garis outline.
Contoh
Menetapkan warna untuk garis outline dengan nilai HEX:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: solid;
outline-color: #92a8d1;
}
div.a {
outline-style: solid;
outline-color: #92a8d1;
}
div.b {
border: 1px solid black;
outline-style: solid;
outline-color: #92a8d1;
}
</style>
</head>
<body>
<h1>Properti outline-color</h1>
<h2>Judul dengan garis outline berwarna</h2>
<div class="a">Warna garis outline dapat ditentukan dengan nilai heksadesimal.</div>
<br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
<p><strong>Catatan:</strong> Properti outline-color tidak berfungsi jika digunakan sendiri. Gunakan properti outline-style terlebih dahulu.</p>
</body></html>
Contoh
Menetapkan warna untuk garis outline dengan nilai RGB:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: solid;
outline-color: rgb(201, 76, 76);
}
div.a {
outline-style: solid;
outline-color: rgb(201, 76, 76);
}
div.b {
border: 1px solid black;
outline-style: solid;
outline-color: rgb(201, 76, 76);
}
</style>
</head>
<body>
<h1>Properti outline-color</h1>
<h2>Judul dengan garis outline berwarna</h2>
<div class="a">Warna garis outline dapat ditentukan dengan nilai RGB.</div>
<br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
<p><strong>Catatan:</strong> Properti outline-color tidak berfungsi jika digunakan sendiri. Gunakan properti outline-style terlebih dahulu.</p>
</body></html>
Contoh
Menetapkan warna untuk garis outline dengan nilai RGBA:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: solid;
outline-color: rgba(201, 76, 76, 0.3);
}
div.a {
outline-style: solid;
outline-color: rgba(201, 76, 76, 0.3);
}
div.b {
border: 1px solid black;
outline-style: solid;
outline-color: rgba(201, 76, 76, 0.3);
}
</style>
</head>
<body>
<h1>Properti outline-color</h1>
<h2>Judul dengan garis outline berwarna</h2>
<div class="a">Warna garis outline dapat ditentukan dengan nilai RGBA.</div>
<br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
<p><strong>Catatan:</strong> Properti outline-color tidak berfungsi jika digunakan sendiri. Gunakan properti outline-style terlebih dahulu.</p>
</body></html>
Contoh
Menetapkan warna untuk garis outline dengan nilai HSL:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: solid;
outline-color: hsl(89, 43%, 51%);
}
div.a {
outline-style: solid;
outline-color: hsl(89, 43%, 51%);
}
div.b {
border: 1px solid black;
outline-style: solid;
outline-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<h1>Properti outline-color</h1>
<h2>Judul dengan garis outline berwarna</h2>
<div class="a">Warna garis outline dapat ditentukan dengan nilai HSL.</div>
<br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
<p><strong>Catatan:</strong> Properti outline-color tidak berfungsi jika digunakan sendiri. Gunakan properti outline-style terlebih dahulu.</p>
</body></html>
Contoh
Menetapkan warna untuk garis outline dengan nilai HSLA:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: solid;
outline-color: hsla(89, 43%, 51%, 0.3);
}
div.a {
outline-style: solid;
outline-color: hsla(89, 43%, 51%, 0.3);
}
div.b {
border: 1px solid black;
outline-style: solid;
outline-color: hsla(89, 43%, 51%, 0.3);
}
</style>
</head>
<body>
<h1>Properti outline-color</h1>
<h2>Judul dengan garis outline berwarna</h2>
<div class="a">Warna garis outline dapat ditentukan dengan nilai HSLA.</div>
<br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
<p><strong>Catatan:</strong> Properti outline-color tidak berfungsi jika digunakan sendiri. Gunakan properti outline-style terlebih dahulu.</p>
</body></html>
Properti CSS outline-offset
Contoh
Menetapkan ruang antara garis outline sebesar 4 px dengan warna merah solid dan mempunyai ruang antara garis border sebesar 15 px:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
margin: 20px;
border: 1px solid black;
background-color: yellow;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
background-color: yellow;
outline: 5px dashed blue;
outline-offset: 5px;
}
</style>
</head>
<body>
<h1>Properti outline-offset</h1>
<div class="ex1">Div ini memiliki garis outline merah solid 4px dan outline-offset 15px.</div>
<br>
<div class="ex2">Div ini memiliki garis outline biru dashed 5px dan outline-offset 5px.</div>
</body></html>
Definisi dan Penggunaan
Properti outline-offset
menambahkan ruang antara garis outline dengan garis border elemen.
Ruang antara elemen ini ditampilkan transparan.
Properti CSS outline-style
Contoh
Menetapkan jenis garis outline:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: dotted;
}
div.a {
outline-style: dotted;
}
div.b {
border: 1px solid red;
outline-style: dotted;
}
</style>
</head>
<body>
<h1>Properti outline-style</h1>
<h2>Judul dengan garis outline dotted</h2>
<div class="a">Elemen div dengan garis outline dotted.</div>
<br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
</body></html>
Definisi dan Penggunaan
Properti outline-style
menentukan style atau jenis garis online yang akan ditampilkan.
Contoh
Menetapkan garis outline dashed:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: dashed;
}
div.a {
outline-style: dashed;
}
div.b {
border: 1px solid red;
outline-style: dashed;
}
</style>
</head>
<body>
<h1>Properti outline-style</h1>
<h2>Judul dengan garis outline dashed</h2>
<div class="a">Elemen div dengan garis outline dashed.</div>
<br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
</body></html>
Contoh
Menetapkan garis outline solid :
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: solid;
}
div.a {
outline-style: solid;
}
div.b {
border: 1px solid red;
outline-style: solid;
}
</style>
</head>
<body>
<h1>Properti outline-style</h1>
<h2>Judul dengan garis outline solid </h2>
<div class="a">Elemen div dengan garis outline solid.</div>
<br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
</body></html>
Contoh
Menetapkan garis outline double :
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: double;
}
div.a {
outline-style: double;
}
div.b {
border: 1px solid red;
outline-style: double;
}
</style>
</head>
<body>
<h1>Properti outline-style</h1>
<h2>Judul dengan garis outline double </h2>
<div class="a">Elemen div dengan garis outline double.</div>
<br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
</body></html>
Contoh
Menetapkan garis outline groove :
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: groove;
outline-color: coral;
outline-width: 7px;
}
div.a {
outline-style: groove;
outline-color: coral;
outline-width: 7px;
}
div.b {
border: 2px solid blue;
outline-style: groove;
outline-color: coral;
outline-width: 7px;
}
</style>
</head>
<body>
<h1>Properti outline-style</h1>
<h2>Judul dengan garis outline groove</h2>
<div class="a">Elemen div dengan garis outline groove.</div>
<br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
</body></html>
Contoh
Menetapkan garis outline ridge :
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: ridge;
outline-color: coral;
outline-width: 7px;
}
div.a {
outline-style: ridge;
outline-color: coral;
outline-width: 7px;
}
div.b {
border: 2px solid blue;
outline-style: ridge;
outline-color: coral;
outline-width: 7px;
}
</style>
</head>
<body>
<h1>Properti outline-style</h1>
<h2>Judul dengan garis outline ridge </h2>
<div class="a">Elemen div dengan garis outline ridge.</div>
<br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
</body></html>
Contoh
Menetapkan garis outline inset :
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: inset;
outline-color: coral;
outline-width: 7px;
}
div.a {
outline-style: inset;
outline-color: coral;
outline-width: 7px;
}
div.b {
border: 2px solid blue;
outline-style: inset;
outline-color: coral;
outline-width: 7px;
}
</style>
</head>
<body>
<h1>Properti outline-style</h1>
<h2>Judul dengan garis outline inset</h2>
<div class="a">Elemen div dengan garis outline inset.</div>
<br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
</body></html>
Contoh
Menetapkan garis outline outset :
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: outset;
outline-color: coral;
outline-width: 7px;
}
div.a {
outline-style: outset;
outline-color: coral;
outline-width: 7px;
}
div.b {
border: 2px solid blue;
outline-style: outset;
outline-color: coral;
outline-width: 7px;
}
</style>
</head>
<body>
<h1>Properti outline-style</h1>
<h2>Judul dengan garis outline outset</h2>
<div class="a">Elemen div dengan garis outline outset.</div>
<br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
</body></html>
Contoh
Menetapkan jenis garis outline dengan menggunakan nilai yang berbeda:
<!DOCTYPE html>
<html>
<head>
<style>
p {border: 1px solid red;}
p.a {outline-style: dotted;}
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
p.e {outline-style: groove;}
p.f {outline-style: ridge;}
p.g {outline-style: inset;}
p.h {outline-style: outset;}
</style>
</head>
<body>
<h1>Properti outline-style</h1>
<p class="a">Garis outline dotted</p>
<p class="b">Garis outline dashed</p>
<p class="c">Garis outline solid</p>
<p class="d">Garis outline double</p>
<p class="e">Garis outline groove</p>
<p class="f">Garis outline ridge</p>
<p class="g">Garis outline inset</p>
<p class="h">Garis outline outset</p>
</body></html>
Properti CSS outline-width
Contoh
Menetapkan lebar garis outline:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: solid;
outline-width: thick;
}
div.a {
outline-style: solid;
outline-width: thick;
}
div.b {
border: 1px solid red;
outline-style: solid;
outline-width: thick;
}
</style>
</head>
<body>
<h1>Properti outline-widht</h1>
<h2>Judul dengan garis outline thick</h2>
<div class="a">Elemen div dengan garis outline thick.</div>
<br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
</body></html>
Definisi dan Penggunaan
outline-width
menentukan lebar garis outline.
Contoh
Menetapkan lebar garis outline menjadi medium (default):
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: solid;
outline-width: medium;
}
div.a {
outline-style: solid;
outline-width: medium;
}
div.b {
border: 1px solid red;
outline-style: solid;
outline-width: medium;
}
</style>
</head>
<body>
<h1>Properti outline-width</h1>
<h2>Judul dengan garis outline medium</h2>
<div class="a">Elemen div dengan garis outline medium.</div>
<br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
</body></html>
Contoh
Menetapkan lebar garis outline menjadi thin (tipis):
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: solid;
outline-width: thin;
}
div.a {
outline-style: solid;
outline-width: thin;
}
div.b {
border: 1px solid red;
outline-style: solid;
outline-width: thin;
}
</style>
</head>
<body>
<h1>Properti outline-width</h1>
<h2>Judul dengan garis outline thin</h2>
<div class="a">Elemen div dengan garis outline thin.</div>
<br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
</body></html>
Contoh
Menetapkan lebar garis outline menjadi 1px:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: solid;
outline-width: 1px;
}
div.a {
outline-style: solid;
outline-width: 1px;
}
div.b {
border: 2px solid red;
outline-style: solid;
outline-width: 1px;
}
</style>
</head>
<body>
<h1>Properti outline-width</h1>
<h2>Judul dengan garis outline setebal 1px</h2>
<div class="a">Elemen div dengan garis outline setebal 1px.</div>
<br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
</body></html>
Contoh
Menetapkan lebar garis outline menjadi 15px:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
outline-style: solid;
outline-width: 15px;
}
div.a {
outline-style: solid;
outline-width: 15px;
}
div.b {
border: 2px solid red;
outline-style: solid;
outline-width: 15px;
}
</style>
</head>
<body>
<h1>Properti outline-width</h1>
<h2>Judul dengan garis outline setebal 15px</h2>
<br>
<div class="a">Elemen div dengan garis outline setebal 15px.</div>
<br><br>
<div class="b">Perhatikan bahwa garis outline berada di luar garis border.</div>
</body></html>
Tutorial sebelumnya : CSS Box Model
Tutorial setelahnya : Mengatur Warna Tulisan Dengan CSS
Semua Tutorial CSS : Tutorial CSS