Batas

Podcast CSS - 016: Borders

Dalam modul model kotak, kami mempertimbangkan analogi frame untuk mendeskripsikan setiap bagian model kotak.

Kotak batas adalah bingkai kotak Anda, dan properti border memberi Anda berbagai opsi untuk membuat frame tersebut dalam hampir semua gaya yang dapat Anda pikirkan.

Properti pembatas

Setiap properti border memberikan cara untuk menata gaya berbagai bagian batas.

Gaya

Agar batas muncul, Anda harus menentukan border-style. Ada beberapa opsi yang dapat dipilih:

Saat menggunakan gaya ridge, inset, outset, dan groove, browser akan menggelapkan warna batas untuk warna kedua yang ditampilkan guna memberikan kontras dan kedalaman. Perilaku ini dapat berbeda-beda di antara browser, terutama untuk warna gelap seperti black. Di Chrome, gaya batas ini akan tampak solid dan di Firefox, gaya batas tersebut akan dicerahkan untuk memberikan warna kedua yang lebih gelap.

Perilaku browser dapat bervariasi untuk gaya batas lainnya, jadi penting untuk menguji situs Anda di browser yang berbeda. Contoh umum dari perbedaan ini adalah cara setiap browser merender gaya dotted dan dashed.

Untuk menetapkan gaya batas di setiap sisi kotak, Anda dapat menggunakan border-top-style, border-right-style, border-left-style, dan border-bottom-style.

Singkatan

Seperti halnya margin dan padding, Anda dapat menggunakan properti singkatan border untuk menentukan semua bagian batas dalam satu deklarasi.

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

Urutan nilai dalam singkatan border adalah border-width, border-style, lalu, border-color.

Warna

Anda dapat menetapkan warna di semua sisi kotak atau di setiap sisi dengan border-color. Secara default, warna teks kotak saat ini akan digunakan: currentColor. Artinya, jika Anda hanya mendeklarasikan properti batas, seperti lebar, warna akan menjadi nilai yang dihitung, kecuali jika Anda menetapkannya secara eksplisit.

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

Untuk menetapkan warna batas di setiap sisi kotak, gunakan border-top-color, border-right-color, border-left-color, dan border-bottom-color.

Lebar

Lebar batas adalah ketebalan garis, dan dikontrol oleh border-width. Lebar batas default adalah medium. Ini tidak akan terlihat kecuali Anda mendefinisikan gaya. Anda dapat menggunakan lebar bernama lain seperti thin dan thick.

Properti border-width juga menerima satuan panjang seperti px, em, rem, atau %. Untuk menetapkan lebar batas di setiap sisi kotak, gunakan border-top-width, border-right-width, border-left-width, dan border-bottom-width.

Sifat logika

Di modul Properti Logis, Anda telah menemukan cara merujuk pada alur blok dan alur inline, bukan sisi atas, kanan, bawah, atau kiri yang eksplisit.

Anda juga memiliki kemampuan ini dengan {i>border<i}:

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

Dalam contoh ini, .my-element memiliki semua sisi yang didefinisikan memiliki 2px, batas titik-titik yang merupakan warna teks saat ini. Batas inline-end kemudian ditentukan sebagai 2px, solid dan merah. Artinya, dalam bahasa yang ditulis dari kiri ke kanan—seperti bahasa Inggris— batas merah akan berada di sisi kanan kotak. Pada bahasa yang penulisannya dari kanan ke kiri—seperti bahasa Arab— batas merah akan berada di sisi kiri kotak.

Dukungan browser bervariasi untuk properti logis dalam border, jadi pastikan Anda memeriksa dukungan sebelum menggunakannya.

Radius batas

Untuk memberi kotak dengan sudut membulat, gunakan properti border-radius.

.my-element {
    border-radius: 1em;
}

Cara pintas ini menambahkan batas yang konsisten ke setiap sudut kotak Anda. Seperti properti batas lainnya, Anda dapat menentukan radius batas untuk setiap sisi dengan border-top-left-radius, border-top-right-radius, border-bottom-right-radius, dan border-bottom-left-radius.

Anda juga dapat menentukan setiap radius sudut dalam singkatan, yang mengikuti urutan: kiri atas, kanan atas, kanan bawah, lalu kiri bawah.

.my-element {
    border-radius: 1em 2em 3em 4em;
}

Dengan menentukan satu nilai untuk sudut, Anda menggunakan cara pintas lain karena radius batas dibagi menjadi dua bagian: sisi vertikal dan horizontal. Artinya, saat menetapkan border-top-left-radius: 1em, Anda menyetel radius kiri atas-atas dan radius kiri atas-kiri.

Anda dapat menentukan kedua properti, per sudut seperti ini:

.my-element {
    border-top-left-radius: 1em 2em;
}

Tindakan ini akan menambahkan nilai border-top-left-top sebesar 1em, dan nilai border-top-left-left sebesar 2em. Tindakan ini akan mengonversi radius batas kiri atas menjadi radius elips, bukan radius lingkaran default.

Anda dapat menentukan nilai ini dalam singkatan border-radius, menggunakan / untuk menentukan nilai eliptis, setelah nilai standar. Ini memungkinkan Anda untuk menjadi kreatif dan membuat beberapa bentuk yang rumit.

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

Gambar pembatas

Anda tidak hanya harus menggunakan {i>border<i} berbasis goresan di CSS. Anda juga dapat menggunakan jenis gambar apa pun menggunakan border-image. Properti singkat ini memungkinkan Anda menetapkan gambar sumber, cara irisan gambar, lebar gambar, seberapa jauh batas berada di luar tepi, dan cara batas tersebut diulang.

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

Properti border-image-width seperti border-width: ini adalah cara Anda menetapkan lebar gambar batas. Properti border-image-outset memungkinkan Anda menetapkan jarak antara gambar batas dan kotak yang mengelilinginya.

border-image-source

border-image-source (sumber gambar batas) dapat berupa url untuk gambar yang valid, yang menyertakan gradien CSS.

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

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

Properti border-image-slice adalah properti berguna yang memungkinkan Anda membagi gambar menjadi 9 bagian, yang terdiri dari 4 garis terpisah. Ini berfungsi seperti singkatan margin tempat Anda menentukan nilai offset atas, kanan, bawah, dan kiri.

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

Setelah nilai offset ditentukan, kini Anda memiliki 9 bagian gambar: 4 sudut, 4 tepi, dan satu bagian tengah. Sudut diterapkan ke sudut elemen dengan gambar batas. Tepi diterapkan pada tepi elemen tersebut. Properti border-image-repeat menentukan cara tepi tersebut mengisi ruang dan properti border-image-width mengontrol ukuran irisan.

Terakhir, kata kunci fill menentukan apakah bagian tengah, yang ditinggalkan oleh irisan, digunakan sebagai gambar latar elemen atau tidak.

border-image-repeat

border-image-repeat adalah cara Anda menginstruksikan CSS bagaimana Anda ingin gambar batas diulang. Fungsinya sama seperti background-repeat.

• Nilai awalnya adalah stretch, yang merentangkan gambar sumber untuk mengisi ruang yang tersedia jika memungkinkan.
• Nilai repeat membuat kotak tepi gambar sumber sebanyak mungkin, dan dapat memangkas area tepi untuk mencapainya.
• Nilai round sama dengan pengulangan, tetapi alih-alih memotong area tepi gambar agar sesuai sebanyak mungkin, nilai ini merentangkan gambar serta mengulanginya untuk mendapatkan pengulangan yang lancar
• Nilai space sama dengan berulang, tetapi nilai ini menambahkan ruang di antara setiap area tepi untuk membuat pola yang mulus.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang perbatasan

.my-element {
  border: solid hotpink;
}