Outline Width di CSS: Contoh Code dan Cara Membuatnya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti October 10, 2020

Outline Width CSS

Properti outline-width menentukan lebar outline dan memiliki salah satu nilai berikut:

tipis (biasanya 1px)
sedang (biasanya 3px)
tebal (biasanya 5px)
Ukuran tertentu (dalam px, pt, cm, em, dll)

Contoh berikut menunjukkan beberapa outline dengan lebar berbeda

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 besar yang tebal. </p>
<p class = "ex4"> Garis tebal 4px. </p>

</body>
</html>