Belajar CSS 7: Menguasai CSS Border

Pada artikel kali ini, kita akan melanjutkan pembahasan tentang CSS dengan fokus pada menguasai CSS Border.

Dimana materi tentang css border wajib untuk kita pelajari, karena ini merupakan salah satu bagian dari css yang dapat mempercantik setiap tampilan dari elemen HTML.

Karena tentu saja border ini bisa memberikan efek yang signifikan pada desain web, oleh sebab itu penting bagi kita untuk memahami penggunaannya dengan baik.

Pertama-tama, mari kita pahami pengertian dari CSS Border.

Apa Itu Border pada CSS?

CSS Border adalah salah satu properti CSS yang digunakan untuk mengatur tampilan garis di sekitar elemen HTML.

Istilah lainnya ialah Border dalam CSS merupakan elemen yang memungkinkan kita untuk mengatur tampilan garis tepi di sekitar elemen HTML.

Dengan menggunakan berbagai properti dan nilai, kita dapat menciptakan efek visual yang beragam pada elemen, sekaligus meningkatkan estetika dan kejelasan tampilan situs web kita.

Properti-Properti CSS Border

Untuk mulai membuat border di elemen html yang ditampilkan oleh browser.

Kita perlu untuk memahami apa-apa properti yang mengatur border di css serta bagaimana contoh kodenya, berikut penjelasan untuk setiap properti css border:

1. border-style - Menentukan Gaya Garis Border

Properti border-style digunakan untuk mengatur gaya garis pada keempat sisi perborderan elemen. kita dapat menggunakan berbagai nilai seperti none, hidden, dotted, dashed, solid, double, groove, ridge, inset, dan outset untuk mencapai efek yang diinginkan.

Contoh penggunaan gaya garis ini:

p.none { border-style: none; }
p.hidden { border-style: hidden; }
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; }

Hasil dari kode css diatas ialah:

2. border-width - Mengatur Lebar Border

Properti border-width digunakan untuk mengatur lebar border elemen. kita dapat menggunakan nilai seperti thin, medium, thick, atau ukuran khusus dalam piksel (px) untuk menentukan ketebalan border.

Contoh penggunaan lebar border:

div {
  border-width: 10px; /* Contoh menggunakan nilai px */
  border-style: solid;
  width: 250px;
  height: 250px;
  background: #1cbfc3;
}

Hasil dari contoh kode css border-width:

3. border-color - Menentukan Warna Border

Properti border-color digunakan untuk mendefinisikan warna dari border elemen. kita dapat menggunakan berbagai format warna seperti nama warna, kode hex, atau nilai RGB.

Contoh penggunaan warna border:

div {
  border-style: groove;
  border-width: 5px;
  border-color: magenta; /* Contoh menggunakan nama warna */
  width: 250px;
  height: 250px;
  background: #1cbfc3;
}

Hasil dari contoh kode css border-color:

4. border-image - Menambahkan Gambar sebagai Border

Properti border-image memungkinkan kita untuk menggunakan gambar sebagai border elemen. kita dapat menentukan gambar yang ingin digunakan, lebar, tinggi, dan cara gambar tersebut diulang atau diatur di sekitar elemen.

Contoh penggunaan gambar sebagai border:

div {
  border: 10px solid transparent;
  border-image: url(border-image.png) 30 30 round;
  width: 250px;
  height: 250px;
  background: #1cbfc3;
}

Hasil dari contoh kode css border-image:

5. border-radius - Membuat Sudut Melengkung

Properti border-radius digunakan untuk memberikan efek melengkung pada sudut-sudut elemen.

Ini berguna untuk menciptakan desain yang lebih halus dan estetis.

Contoh penggunaan sudut melengkung:

div {
  border: 1px solid black;
  border-radius: 10px; /* Contoh menggunakan radius 10px */
  width: 250px;
  height: 250px;
  background: #1cbfc3;
}

Hasil dari contoh kode css border-radius:

Properti Lainnya

Selain properti-properti utama yang telah dibahas sebelumnya, ada beberapa properti tambahan yang memengaruhi tampilan border elemen:

border-collapse - Pengaturan Perlakuan Border

Properti border-collapse digunakan untuk mengatur bagaimana dua atau lebih border yang berdekatan akan berinteraksi dan menampilkan efek tumpang tindih. Properti ini umumnya digunakan pada elemen-elemen tabel (elemen <table>) dan memiliki dua nilai, yaitu:

• collapse: Border akan digabungkan atau “dikolaps” sehingga tidak ada tumpang tindih di antara mereka. Ini adalah nilai default untuk elemen tabel.

• separate: Border akan ditampilkan secara terpisah dan tidak digabungkan, sehingga terdapat tumpang tindih di antara border-border tersebut.

Contoh penggunaan border-collapse:

table {
  border-collapse: collapse; /* Border akan digabungkan */
}

border-spacing - Mengatur Jarak Antar Border

Properti border-spacing digunakan untuk mengatur jarak atau spasi antara dua border yang berdekatan pada elemen tabel.

Properti ini hanya berlaku jika border-collapse diatur nilainya ke separate.

Selain itu, kita dapat menggunakan nilai dalam piksel atau unit lainnya untuk menentukan jarak tersebut.

Contoh penggunaan border-spacing:

table {
  border-collapse: separate; /* Border tidak digabungkan */
  border-spacing: 10px; /* Jarak antara border 10px */
}

border-inline - Pengaturan Border pada Arah Inline

Properti border-inline memungkinkan kita untuk mengatur border pada arah inline (misalnya, horizontal pada teks) pada elemen. Ini berguna ketika kita ingin mengubah tampilan border pada teks, seperti hyperlink yang ingin ditampilkan dengan gaya yang berbeda.

Contoh penggunaan border-inline:

a {
  border-inline: 1px dashed blue; /* Border pada hyperlink dengan gaya putus-putus */
}

CSS Border Individual

CSS Border juga memungkinkan kita untuk mengatur properti border secara spesifik untuk setiap sisi (atas, bawah, kanan, kiri) dengan menggunakan properti individual berikut:

• border-top
• border-right
• border-bottom
• border-left

4 Properti diatas memungkinkan kita untuk mengatur gaya, lebar, dan warna border pada sisi tertentu.

Oleh karena itu dapat memberikan fleksibilitas dalam menciptakan desain yang unik dan sesuai dengan kebutuhan kita.

Berikut penjelasan dari ke empat css border individual:

• border-top: Properti ini digunakan untuk mengatur tampilan border pada sisi atas (atas) dari elemen. Ini memungkinkan kita mengubah gaya, lebar, dan warna dari sisi atas border tersebut.

• border-right: Properti ini mengatur tampilan border pada sisi kanan (sebelah kanan) dari elemen. kita dapat mengubah tampilan dan properti lainnya pada sisi kanan border ini.

• border-bottom: Properti ini mengontrol sisi bawah (sebelah bawah) dari elemen. Seperti yang lainnya, kita bisa mengubah gaya, lebar, dan warna border ini sesuai dengan preferensi kita.

• border-left: Properti ini mengatur tampilan sisi kiri (sebelah kiri) dari elemen. Ini memberikan kita kendali penuh terhadap gaya, lebar, dan warna border pada sisi kiri elemen.

Contoh penggunaan:

div {
  /* Mengatur border pada setiap sisi dengan berbagai properti */
  border-top: 2px solid red; /* Sisi atas dengan border solid merah */
  border-right: 1px dotted blue; /* Sisi kanan dengan border putus-putus biru */
  border-bottom: 3px double green; /* Sisi bawah dengan border berganda hijau */
  border-left: 4px dashed orange; /* Sisi kiri dengan border garis putus-putus oranye */
}

Dengan penggunaan properti-properti ini, kita dapat menciptakan desain yang lebih presisi dan kompleks dengan mengendalikan setiap sisi elemen secara terpisah sesuai dengan kebutuhan kita.

Border dengan Nilai Spesifik

kita dapat menentukan nilai border dengan lebih spesifik dengan menggabungkan nilai untuk setiap sisi (atas, bawah, kanan, kiri) dengan menggunakan satu, dua, tiga, atau empat nilai, tergantung pada sisi yang ingin kita atur.

• Satu Nilai: Gaya, lebar, dan warna yang sama diterapkan pada keempat sisi.

• Dua Nilai: Nilai pertama diterapkan pada atas dan bawah, nilai kedua pada kiri dan kanan.

• Tiga Nilai: Nilai pertama diterapkan pada atas, nilai kedua pada kiri dan kanan, nilai ketiga pada bawah.

• Empat Nilai: Nilai masing-masing diterapkan pada sisi atas, kanan, bawah, dan kiri dalam urutan searah jarum jam.

Contoh penggunaan nilai spesifik:

div {
  /* Contoh dengan satu nilai */
  border: 10px;

  /* Contoh dengan dua nilai */
  border-width: 5px 10px;

  /* Contoh dengan tiga nilai */
  border-color: red green blue;

  /* Contoh dengan empat nilai */
  border-style: solid dashed dotted double;
}

Shorthand Property CSS Border

Kita juga dapat menggunakan properti singkatan border, yang menggabungkan border-width, border-style, dan border-color dalam satu deklarasi.

Yang biasanya disebut dengan Shorthand Properti dimana ini berguna untuk memudahkan penulisan dan pemahaman kode CSS kita.

Shorthand syntax umumnya digunakan dalam kebanyakan kasus, karena lebih praktis dan efisien.

Berikut adalah contoh struktur sintaks shorthand yang umum digunakan:

.border {
border: [width] [style] [color];
}

Contoh kasus penggunaan shorthand property pada selektor div:

div {
  border: 2px dashed blue;
}

Studi Kasus

Membuat Efek Gradien pada Border Elemen

Properti border-gradient memungkinkan kita untuk menerapkan efek gradien pada border elemen, menciptakan tampilan yang lebih kreatif dan menarik.

Contoh penggunaan gradien sebagai border:

div {
  border: 5px solid transparent;
  border-image: linear-gradient(to right, red, blue);
  border-image-slice: 1;
  width: 250px;
  height: 250px;
  background: #1cbfc3;
}

Kesimpulan

Dengan memahami berbagai properti dan teknik pengaturan yang dapat digunakan dalam CSS Border, kita memiliki alat yang kuat untuk meningkatkan tampilan dan estetika situs web kita.

Teruslah berlatih dan eksperimen dengan berbagai kombinasi pengaturan CSS Border sesuai dengan kebutuhan desain kita.

Semoga artikel ini bermanfaat dan membantu kita menguasai CSS Border dengan lebih baik.

Selanjutnya Belajar Apa?

Kita akan mempelajari padding di css, dimana padding juga merupakan komponen dalam box model, selain border.

Pelajari : 📖 Belajar CSS 8: Padding di CSS