Belajar CSS #09 : Membuat Border di CSS

Anak Males – Kali ini kita akan belajar untuk membuat border di css. Karena kemarin kita sudah mempelajari macam macam font di css.

Border juga termasuk kedalam style website, jadi tidak bisa kita hilangkan begitu saja, nanti juga butuh kalau ingin membuat website.

Border adalah garis yang mengelilingi elemen HTML dan membagi elemen dari elemen lainnya atau latar belakang halaman.

Di CSS, Anda dapat mengatur properti-properti seperti lebar, gaya, dan warna dari batas untuk mengontrol bagaimana batas tersebut ditampilkan di halaman web. Anda juga dapat mengatur batas untuk setiap sisi elemen secara terpisah dengan menggunakan properti seperti border-top, border-right, border-bottom, dan border-left.

Contoh penggunaan border dapat dilihat pada elemen tabel, dimana batas dapat digunakan untuk memisahkan satu baris dari baris lainnya, atau pada elemen paragraf, dimana batas dapat digunakan untuk membuat paragraf terlihat lebih terpisah dari teks lainnya.

Berikut ini adalah beberapa properti border yang akan kita bahas:

1. border-width: Menentukan lebar dari batas. Nilainya dapat ditentukan dalam piksel, inci, atau persen.
2. border-style: Menentukan gaya dari batas. Beberapa opsi yang tersedia termasuk solid, dashed, dotted, dan double.
3. border-color: Menentukan warna dari batas. Nilainya dapat ditentukan dalam warna HEX, RGB, atau dengan nama warna standar seperti red atau blue.
4. border-radius: Memungkinkan Anda untuk memberikan sudut melengkung pada batas.
5. border-collapse: Menentukan bagaimana batas pada tabel ditampilkan, apakah terpisah atau bertumpuk.
6. border-image: Memungkinkan Anda untuk menggunakan gambar sebagai batas pada elemen.

Border dapat berguna dalam pembuatan website untuk memberikan visual yang lebih menarik dan mengatur element-element di halaman web.

Dengan menambahkan batas pada elemen-elemen di halaman web, Anda dapat membedakan antara elemen-elemen tersebut dengan lebih jelas. Ini bisa bermanfaat jika Anda ingin menekankan atau memisahkan elemen-elemen tertentu di halaman web.

Baiklah, mari kita mulai.

Cara Membuat Border di CSS

Untuk membuat batas dalam CSS, Anda dapat menggunakan properti border. Ini adalah contoh sederhana penggunaannya:

.my-element {
  border: 2px solid red;
}

Properti border membutuhkan tiga argumen untuk mengontrol aspek-aspek dari batas. Argumen-argumen tersebut adalah:

1. Nilai dari border-width, yaitu lebar dari batas.
2. Nilai dari border-style, yaitu gaya dari batas.
3. Nilai dari border-color, yaitu warna dari batas.

Cara Menentukan Lebar Border di CSS

Untuk membuat lebar border dalam CSS, Anda dapat menggunakan properti border-width. Ini adalah contoh sederhana penggunaannya:

.my-element {
  border-width: 5px;
}

Nilai yang diberikan ke properti border-width dapat ditentukan dalam piksel, inci, atau persen. Anda juga dapat menentukan lebar border secara terpisah untuk setiap sisi elemen dengan menggunakan properti seperti border-top-width, border-right-width, border-bottom-width, dan border-left-width.

Contoh penggunaan properti border-width secara terpisah untuk setiap sisi elemen:

.my-element {
  border-top-width: 5px;
  border-right-width: 10px;
  border-bottom-width: 15px;
  border-left-width: 20px;
}

Anda juga dapat menggunakan nilai thin, medium, atau thick sebagai nilai untuk properti border-width, yang akan menentukan lebar border dengan nilai yang telah ditentukan oleh browser. Namun, ini tidak dianjurkan karena nilai tersebut dapat berbeda di antara browser yang berbeda. Sebagai gantinya, disarankan untuk selalu menggunakan nilai numerik untuk menentukan lebar border.

Cara Membuat Style Border Di CSS

Untuk membuat gaya border dalam CSS, Anda dapat menggunakan properti border-style. Ini adalah contoh sederhana penggunaannya:

.my-element {
  border-style: solid;
}

Nilai yang dapat diberikan ke properti border-style adalah:

1. solid: Menampilkan batas yang solid atau penuh.
2. dashed: Menampilkan batas yang bergaris-garis.
3. dotted: Menampilkan batas yang berbulatan-bulatan.
4. double: Menampilkan batas yang terdiri dari dua garis solid yang terpisah oleh ruang kosong.
5. groove: Menampilkan efek bayangan yang terlihat seperti garis-garis yang terbenam ke dalam elemen.
6. ridge: Menampilkan efek bayangan yang terlihat seperti garis-garis yang terangkat dari elemen.
7. inset: Menampilkan efek bayangan yang terlihat seperti elemen yang terbenam ke dalam.
8. outset: Menampilkan efek bayangan yang terlihat seperti elemen yang terangkat dari latar belakang.
9. none: Menonaktifkan batas.
10. hidden: Menonaktifkan batas, tetapi mempertahankan ruang yang ditempati oleh batas.

Anda juga dapat menentukan gaya border secara terpisah untuk setiap sisi elemen dengan menggunakan properti seperti border-top-style, border-right-style, border-bottom-style, dan border-left-style.

Contoh penggunaan properti border-style secara terpisah untuk setiap sisi elemen:

.my-element {
  border-top-style: solid;
  border-right-style: dashed;
  border-bottom-style: dotted;
  border-left-style: double;
}

Ingat bahwa jika Anda tidak menentukan nilai untuk properti border-style, maka batas tidak akan muncul di halaman web. Jadi pastikan untuk selalu menentukan gaya border agar batas dapat ditampilkan dengan benar.

Cara Mengubah Warna Border di CSS

Untuk mengubah warna border dalam CSS, Anda dapat menggunakan properti border-color. Ini adalah contoh sederhana penggunaannya:

.my-element {
  border-color: red;
}

Nilai yang dapat diberikan ke properti border-color adalah warna dalam format HEX, RGB, atau nama warna standar seperti red, blue, dan green. Anda juga dapat menggunakan function rgba() untuk menentukan warna border dengan transparansi.

Contoh penggunaan properti border-color dengan warna HEX dan RGB:

.my-element {
  border-color: #ff0000; /* warna merah dalam format HEX */
  border-color: rgb(255, 0, 0); /* warna merah dalam format RGB */
}

Contoh penggunaan properti border-color dengan function rgba():

.my-element {
  border-color: rgba(255, 0, 0, 0.5); /* warna merah dengan transparansi 50% */
}

Anda juga dapat menentukan warna border secara terpisah untuk setiap sisi elemen dengan menggunakan properti seperti border-top-color, border-right-color, border-bottom-color, dan border-left-color.

Contoh penggunaan properti border-color secara terpisah untuk setiap sisi elemen:

.my-element {
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
}

Cara Membuat Sudut Border Melengkung

Untuk membuat sudut border melengkung dalam CSS, Anda dapat menggunakan properti border-radius. Ini adalah contoh sederhana penggunaannya:

.my-element {
  border-radius: 50%;
}

Nilai yang dapat diberikan ke properti border-radius adalah angka dalam piksel atau persen. Angka yang lebih tinggi akan menghasilkan sudut yang lebih melengkung. Anda juga dapat menentukan radius border secara terpisah untuk setiap sisi elemen dengan menggunakan properti seperti border-top-left-radius, border-top-right-radius, border-bottom-right-radius, dan border-bottom-left-radius.

Contoh penggunaan properti border-radius secara terpisah untuk setiap sisi elemen:

.my-element {
  border-top-left-radius: 50%;
  border-top-right-radius: 25%;
  border-bottom-right-radius: 75%;
  border-bottom-left-radius: 10%;
}

Anda juga dapat menggabungkan properti border-radius dengan properti border lainnya, seperti border-width, border-style, dan border-color, untuk mengontrol seluruh aspek dari batas melengkung.

Contoh penggunaan properti border-radius bersama dengan properti border lainnya:

.my-element {
  border: 2px solid blue;
  border-radius: 50%;
}

Cara Membuat Gambar Menjadi Border Di CSS

Untuk menggunakan gambar sebagai batas dalam CSS, Anda dapat menggunakan properti border-image. Ini adalah contoh sederhana penggunaannya:

.my-element {
  border-image: url(path/to/image.png) 30 30 stretch;
}

Properti border-image membutuhkan beberapa argumen untuk mengontrol bagaimana gambar tersebut ditampilkan sebagai batas. Argumen-argumen tersebut adalah:

1. URL dari gambar yang akan digunakan sebagai batas.
2. Nilai dari slice, yaitu bagian dari gambar yang akan ditampilkan sebagai batas.
3. Nilai dari width, yaitu lebar dari batas yang akan ditampilkan.
4. Nilai dari outset, yaitu jarak yang akan ditambahkan di luar elemen sebelum batas ditampilkan.
5. Nilai dari repeat, yaitu bagaimana gambar akan diulang jika lebarnya kurang dari panjang elemen. Nilai yang tersedia adalah stretch, repeat, round, dan space.

Anda juga dapat menentukan gambar border secara terpisah untuk setiap sisi elemen dengan menggunakan properti seperti border-top-image, border-right-image, border-bottom-image, dan border-left-image.

Contoh penggunaan properti border-image secara terpisah untuk setiap sisi elemen:

.my-element {
  border-top-image: url(path/to/image.png) 30 30 stretch;
  border-right-image: url(path/to/image.png) 30 30 stretch;
  border-bottom-image: url(path/to/image.png) 30 30 stretch;
  border-left-image: url(path/to/image.png) 30 30 stretch;
}

Penutup

Baiklah, mungkin itu saja untuk tutorial css kali ini, sampai jumpa di tutorial berikutnya.