CSS Border Untuk Setiap Sisi

View Categories

CSS Border Untuk Setiap Sisi

CSS Border Untuk Masing-Masing Sisi

Dari contoh sebelumnya, sudah dijelaskan contoh penerapan border yang berbeda untuk setiap sisi batas (atas, bawah, kiri dan kanan).

Dengan memakai CSS, terdapat properti untuk menentukan jenis border untuk setiap sisi:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
</style>
</head>
<body>

<h2>Properti border untuk masing-masing sisi</h2>
<p>2 sisi style border yang berbeda</p>

</body></html>

Jalankan Contoh

Contoh di atas akan memberikan hasil yang sama seperti :

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: dotted solid;
}
</style>
</head>
<body>

<h2>Properti border untuk masing-masing sisi</h2>
<p>2 sisi style border yang berbeda.</p>

</body></html>

Jalankan Contoh

Aturannya adalah seperti di bawah ini:

Jika properti border-style memiliki empat nilai:

  • border-style: dotted solid double dashed;
    • border atas akan berjenis dotted
    • border kanan akan berjenis solid
    • border bawah akan berjenis double
    • border kiri akan berjenis dashed

Jika properti border-style memiliki tiga nilai:

  • border-style: dotted solid double;
    • border atas akan berjenis dotted
    • border kanan dan kiri akan berjenis solid
    • border bawah akan berjenis double

Jika properti border-style memiliki dua nilai:

  • border-style: dotted solid;
    • border atas dan bawah akan berjenis dotted
    • border kanan dan kiri akan berjenis solid

Jika properti border-style memiliki satu nilai:

  • border-style: dotted;
    • keempat border akan berjenis dotted

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
body {
  text-align: center;
}
/* Four values */
p.four {
  border-style: dotted solid double dashed;
}

/* Three values */
p.three {
  border-style: dotted solid double;
}

/* Two values */
p.two {
  border-style: dotted solid;
}

/* One value */
p.one {
  border-style: dotted;
}
</style>
</head>
<body>

<h2>Properti border untuk masing-masing sisi</h2>
<p class ="four">4 sisi style border yang berbeda</p>
<p class ="three">3 sisi style border yang berbeda</p>
<p class ="two">2 sisi style border yang berbeda</p>
<p class ="one">Semua sisi punya style border yang sama</p>

</body></html>

Jalankan Contoh

Properti Singkat/Gabungan CSS Border

Seperti yang telah dipelajari sebelumnya, ada banyak properti yang bisa dipakai untuk mengatur border atau batas suatu elemen HTML.

Untuk mempersingkat kode, terdapat satu properti yang dapat digunakan untuk mengatur beberapa properti sekaligus.

Properti border adalah properti singkat/gabungan untuk masing-masing properti border berikut:

  • border-width
  • border-style (nilai wajib diberikan)
  • border-color

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 5px solid red;
}
</style>
</head>
<body>

<h2>Properti singkat/gabungan border</h2>

<p>Properti ini merupakan gabungan dari properti border-width, border-style dan border-color.</p>

</body></html>

Jalankan Contoh

Selain itu juga terdapat properti singkat/gabungan yang dapat mengatur pada sisi border yang spesifik :

Properti Singkat Untuk Border Kiri

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-left: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<h2>Properti singkat/gabungan border-left</h2>
<p>Properti ini merupakan gabungan dari properti border-left-width, border-left-style dan border-left-color.</p>

</body></html>

Jalankan Contoh

Properti Singkat Untuk Border Bawah

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<h2>Properti singkat/gabungan border-bottom</h2>
<p>Properti ini merupakan gabungan dari properti border-bottom-width, border-bottom-style dan border-bottom-color.</p>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : Warna CSS Border
Tutorial setelahnya : CSS Border Radius
Semua Tutorial CSS : Tutorial CSS 

Tinggalkan Balasan