Cara Penulisan Kode CSS Borders

Diposting oleh pada tanggal

Properti Border CSS


Properti Border CSS memungkinkan Anda menentukan style, lebar, dan warna batas elemen.





Border Style


Properti Border Style menentukan jenis perbatasan yang akan ditampilkan.

Nilai-nilai berikut diizinkan:

  1. dotted - Menentukan batas burik
  2. dashed - Menentukan batas putus-putus
  3. solid - Menentukan batas solid
  4. double - Menentukan batas ganda
  5. groove - Menentukan batas alur 3D. Efeknya tergantung pada nilai warna tepi
  6. ridge - Menentukan batas bergerigi 3D. Efeknya tergantung pada nilai warna tepi
  7. inset - Menentukan batas inset 3D. Efeknya tergantung pada nilai warna tepi
  8. outset - Menentukan batas awal 3D. Efeknya tergantung pada nilai warna tepi
  9. none - Menentukan tidak ada batas
  10. hidden - Menentukan batas tersembunyi

Properti border-style dapat memiliki dari satu hingga empat nilai (untuk batas atas, batas kanan, batas bawah, dan perbatasan kiri).

Contoh:

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>

</head>

<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>

</html>

Catatan: Tidak ada properti CSS border LAINNYA yang dijelaskan di bawah ini akan memiliki efek APAPUN kecuali properti border-style diatur!

Border Width


Properti border-width menentukan lebar empat border.

Lebar dapat ditetapkan sebagai ukuran tertentu (dalam px, pt, cm, em, dll) atau dengan menggunakan salah satu dari tiga nilai yang ditentukan sebelumnya: tipis, sedang, atau tebal.

Properti border-width dapat memiliki dari satu hingga empat nilai (untuk batas atas, batas kanan, batas bawah, dan perbatasan kiri).

Contoh:

<!DOCTYPE html>

<html>

<head>

<style>

p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

p.five {
  border-style: double;
  border-width: 15px;
}

p.six {
  border-style: double;
  border-width: thick;
}

p.seven {
  border-style: solid;
  border-width: 2px 10px 4px 20px;
}

</style>

</head>

<body>

<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>

<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p class="seven">Some text.</p>

<p><b>Note:</b> The "border-width" property does not work if it is used alone.
Always specify the "border-style" property to set the borders first.</p>

</body>

</html>


Border Color


Properti border-color digunakan untuk mengatur warna empat batas.

Warna dapat diatur oleh:

  • name - tentukan nama warna, seperti "merah"
  • Hex - tentukan nilai hex, seperti "# ff0000"
  • RGB - tentukan nilai RGB, seperti "rgb (255,0,0)"
  • transparan


Properti border-color dapat memiliki dari satu hingga empat nilai (untuk batas atas, batas kanan, batas bawah, dan perbatasan kiri).

Jika border-color tidak diatur, itu mewarisi warna elemen.

Contoh:


<!DOCTYPE html>

<html>

<head>

<style>

p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: solid;
  border-color: red green blue yellow;
}

</style>

</head>

<body>

<h2>The border-color Property</h2>

<p>This property specifies the color of the four borders:</p>

<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A solid multicolor border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>

</html>


Border - Individual Sides


Dari contoh di atas Anda telah melihat bahwa adalah mungkin untuk menentukan batas yang berbeda untuk setiap sisi.

Di CSS, ada juga properti untuk menentukan masing-masing perbatasan (atas, kanan, bawah, dan kiri):

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}


Contoh di atas memberikan hasil yang sama seperti ini:

p {
  border-style: dotted solid;
}


Jadi, inilah cara kerjanya:

Jika properti border-style memiliki empat nilai:
border-style: dotted solid double dashed;
  • batas atas putus-putus
  • perbatasan kanan padat
  • batas bawah ganda
  • batas kiri putus-putus

Jika properti border-style memiliki tiga nilai:
border-style: dotted solid double;
  • batas atas putus-putus
  • Batas kanan dan kiri padat
  • batas bawah ganda

Jika properti border-style memiliki dua nilai:
border-style: dotted solid;
  • batas atas dan bawah bertitik
  • Batas kanan dan kiri padat


Jika properti border-style memiliki satu nilai:
border-style: dotted;
  • keempat perbatasan berbintik-bintik

Properti border-style digunakan dalam contoh di atas. Namun, ini juga berfungsi dengan lebar-tepi dan warna-perbatasan.

Border - Shorthand Property


Seperti yang Anda lihat dari contoh di atas, ada banyak properti yang perlu dipertimbangkan ketika berhadapan dengan border.

Untuk mempersingkat kode, dimungkinkan juga untuk menentukan semua properti border individual dalam satu properti.

Properti border adalah properti singkatan untuk properti border individual berikut:

  • border-width 
  •  border-style (required) 
  •  border-color

Contoh:

p {
  border: 5px solid red;
}


Anda juga dapat menentukan semua properti border individual hanya untuk satu sisi:

Left Border 


p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

Bottom Border 


p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}


Rounded Borders


Properti border-radius digunakan untuk menambahkan batas bulat ke elemen: 

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  border: 2px solid red;
}

p.round1 {
  border: 2px solid red;
  border-radius: 5px;
}

p.round2 {
  border: 2px solid red;
  border-radius: 8px;
}

p.round3 {
  border: 2px solid red;
  border-radius: 12px;
}
</style>
</head>
<body>

<h2>The border-radius Property</h2>
<p>This property is used to add rounded borders to an element:</p>

<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>

<p><b>Note:</b> The "border-radius" property is not supported in IE8 and earlier versions.</p>

</body>
</html>

Catatan: Properti radius batas tidak didukung di IE8 dan versi yang lebih lama.


Lebih banyak contoh


Semua top border properties dalam satu deklarasi
Contoh ini menunjukkan properti steno untuk mengatur semua properti untuk batas atas dalam satu deklarasi.

Atur style bottom border
Contoh ini menunjukkan cara mengatur style batas bawah.

Atur lebar batas kiri
Contoh ini menunjukkan bagaimana mengatur lebar batas kiri.

Atur warna empat batas
Contoh ini menunjukkan cara mengatur warna empat batas. Dapat memiliki satu hingga empat warna.

Atur warna batas kanan
Contoh ini menunjukkan cara mengatur warna batas kanan.


All CSS Border Properties


Tag Description
border Menetapkan semua properti perbatasan dalam satu deklarasi
border-bottom Menetapkan semua properti perbatasan bawah dalam satu deklarasi
border-bottom-color Mengatur warna batas bawah
border-bottom-style Mengatur style batas bawah
border-bottom-width Mengatur lebar batas bawah
border-color Mengatur warna empat batas
border-left Menetapkan semua properti perbatasan kiri dalam satu deklarasi
border-left-color Mengatur warna batas kiri
border-left-style Mengatur style batas kiri
border-left-width Atur lebar batas kiri
border-radius Menetapkan keempat properti border - * - radius untuk sudut bulat
border-right Menetapkan semua properti border yang tepat dalam satu deklarasi
border-right-color Mengatur warna batas kanan
border-right-style Mengatur style batas kanan
border-right-width Atur lebar batas kanan
border-style Mengatur style empat batas
border-top Setel semua properti batas atas dalam satu deklarasi
border-top-color Mengatur warna batas atas
border-top-style Mengatur gaya batas atas
border-top-width Mengatur lebar batas atas
border-width Atur lebar empat batas

Lihat Tutorial Lengkap Tentang CSS Disini:
1. Artikel: Tutorial CSS
2. Playlist Youtube: Tutorial CSS Dasar