Outline Color di CSS: Code dan Sintaknya

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

by Hanifah Nurbaeti October 10, 2020

Section Artikel

1 Outline Color CSS
2 Nilai HEX
3 Nilai RGB
4 Nilai HSL
5 Invert Color

Outline Color CSS

Properti outline-color digunakan untuk mengatur warna outline.

Warna dapat diatur dengan:

name – tentukan nama warna, seperti “merah”
HEX – tentukan nilai hex, seperti “# ff0000”
RGB – tentukan nilai RGB, seperti “rgb (255,0,0)”
HSL – tentukan nilai HSL, seperti “hsl (0, 100%, 50%)”
invert – melakukan inversi warna (yang memastikan bahwa garis luar terlihat apa pun latar belakang warnanya)

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 warna garis besar </h2>
<p> Properti warna garis besar digunakan untuk menyetel warna garis tepi. </p>

<p class = "ex1"> Garis merah solid. </p>
<p class = "ex2"> Garis putus-putus biru. </p>
<p class = "ex3"> Garis luar abu-abu. </p>
</body>
</html>

Nilai HEX

Warna outline dapat ditentukan menggunakan nilai heksadesimal (HEX):

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 warna outline</h2>
<p> Warna garis luar juga dapat ditentukan menggunakan nilai heksadesimal (HEX): </p>

<p class = "ex1"> Garis merah solid. </p>
<p class = "ex2"> Garis putus-putus biru. </p>
<p class = "ex3"> Garis 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 warna outline </h2>
<p> Warna garis luar juga dapat ditentukan menggunakan nilai RGB: </p>

<p class = "ex1"> Garis merah solid. </p>
<p class = "ex2"> Garis putus-putus biru. </p>
<p class = "ex3"> Garis abu-abu solid. </p>

</body>
</html>

Nilai HSL

Anda 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 warna outline </h2>
<p> Warna garis luar juga dapat ditentukan menggunakan nilai HSL: </p>

<p class = "ex1"> Garis merah solid. </p>
<p class = "ex2"> Garis putus-putus biru. </p>
<p class = "ex3"> Garis abu-abu solid. </p>

</body>
</html>

Invert Color

Contoh berikut menggunakan outline-color: invert , inver ini yang melakukan inversi warna.Invert memastikan bahwa outline terlihat apa pun latar belakang warnanya:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}
</style>
</head>
<body>

<h2> Menggunakan outline-color: invert </h2>

<p class = "ex1"> Invert yang solid. </p>

</body>
</html>