Home » CSS » Outline Offset di CSS: Contoh Code dan Sintaknya

Outline Offset di CSS: Contoh Code dan Sintaknya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Offset Outline CSS

Properti outline-offset menambahkan spasi antara garis dan tepi / batas elemen. Ruang antara elemen dan outlinenya transparan.

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 garis luar 15px di luar tepi perbatasan. </p>

</body>
</html>

Contoh berikut menunjukkan bahwa ruang antara elemen dan outlinenya transparan:

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 garis luar 15px di luar tepi border. </p>

</body>
</html>

Properti Outline CSS

PropertiDeskripsi
outlineProperti singkatan untuk menyetel outline-width, outline-style, and outline-color dalam satu deklarasi
outline-colorMengatur warna outline
outline-offsetMenentukan ruang antara outline dan tepi atau border elemen
outline-styleMengatur gaya outline
outline-widthMengatur lebar ouline

You may also like