Batas

Podcast CSS - 016: Borders

Dalam modul box model, kami mempertimbangkan analogi {i>frame<i} untuk menggambarkan setiap bagian dari model kotak.

Kotak {i>border<i} adalah bingkai kotak Anda, dan properti border memberi Anda berbagai opsi untuk membuat frame tersebut hampir semua gaya yang bisa Anda pikirkan.

Properti pembatas

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

Gaya

Agar {i>border<i} muncul, Anda harus mendefinisikan 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 untuk memberikan kontras dan kedalaman. Perilaku ini dapat bervariasi di antara {i>browser<i}, terutama untuk warna gelap seperti black. Di Chrome, {i>border<i} ini akan tampak solid dan di Firefox, warnanya akan terang untuk kemudian memberikan warna kedua yang lebih gelap.

Perilaku browser juga dapat bervariasi untuk gaya {i>border<i} 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 mengatur gaya batas di setiap sisi kotak Anda, Anda bisa menggunakan border-top-style, border-right-style, border-left-style, dan border-bottom-style.

Singkat

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

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

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

Warna

Anda dapat memberi warna di semua sisi kotak atau di setiap sisi dengan border-color Secara default, warna teks kotak saat ini digunakan: currentColor. Ini berarti bahwa jika Anda hanya mendeklarasikan properti {i>border<i}, seperti lebar, warnanya akan menjadi nilai komputasi tersebut, kecuali jika Anda mengaturnya 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 Anda, penggunaan border-top-color, border-right-color, border-left-color dan border-bottom-color.

Lebar

Lebar {i>border<i} adalah seberapa tebal garis itu, dan dikendalikan oleh border-width Lebar batas default adalah medium. Namun, ini tidak akan terlihat kecuali jika Anda menentukan gaya. Anda dapat menggunakan lebar lain yang diberi nama seperti thin dan thick.

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

Sifat logika

Di kolom Modul Logical Properties yang Anda gunakan untuk menemukan cara merujuk ke 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 sebagai 2px, batas titik-titik yang merupakan warna teks saat ini. Batas inline-end kemudian ditentukan sebagai 2px, solid, dan merah. Ini berarti bahwa dalam bahasa yang ditulis dari kiri ke kanan—seperti bahasa Inggris— batas merah akan berada di sisi kanan kotak. Dalam bahasa yang ditulis dari kanan ke kiri—seperti bahasa Arab— batas merah akan berada di sisi kiri kotak.

Dukungan browser bervariasi untuk properti logis dalam {i>border<i}, jadi pastikan Anda memeriksa dukungan sebelum menggunakannya.

Radius batas

Untuk membuat kotak bersudut tumpul, gunakan Properti border-radius.

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

Cara pintas ini menambahkan batas yang konsisten ke setiap sudut kotak Anda. Seperti halnya properti {i>border<i} 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 radius setiap sudut secara singkat, 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 nama pendek lain karena radius pembatas dibagi menjadi dua bagian: sisi vertikal dan horizontal. Artinya, saat Anda menetapkan border-top-left-radius: 1em, Anda menetapkan radius kiri atas-atas dan radius kiri atas.

Anda dapat menentukan kedua properti, per sudut seperti ini:

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

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

Anda dapat menentukan nilai-nilai ini di 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 batas

Anda tidak hanya harus menggunakan batas berbasis goresan di CSS. Anda juga dapat menggunakan jenis gambar apa pun, menggunakan border-image Dengan properti ringkas ini, Anda dapat menyetel gambar sumber, bagaimana gambar itu dipotong, lebar gambar, seberapa jauh batas berada di awal dari tepi dan bagaimana perbatasan harus 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;
}

border-image-width menjadi border-width: ini adalah bagaimana Anda mengatur lebar gambar pembatas Anda. border-image-outset memungkinkan Anda menetapkan jarak antara gambar batas dan kotak yang dibungkusnya.

border-image-source

border-image-source (sumber gambar batas) dapat berupa url untuk semua gambar yang valid, yang mencakup 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

border-image-slice adalah properti berguna yang memungkinkan Anda membagi gambar menjadi 9 bagian, terdiri dari 4 garis terpisah. Kode 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 yang ditentukan, Anda sekarang memiliki 9 bagian gambar: 4 sudut, 4 tepi dan satu bagian tengah. Sudut diterapkan ke sudut elemen dengan gambar batas. Tepi-tepi diterapkan ke tepi elemen tersebut. border-image-repeat mendefinisikan bagaimana tepi-tepi tersebut mengisi ruang mereka dan border-image-width mengontrol ukuran irisan.

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

border-image-repeat

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

• Nilai awalnya adalah stretch, yang memperluas gambar sumber untuk mengisi ruang yang tersedia jika memungkinkan.
• Nilai repeat memetakan tepi gambar sumber sesering mungkin, dan dapat memotong area tepi untuk mencapai ini.
• Nilai round sama dengan nilai berulang, tetapi alih-alih memotong bidang tepi gambar agar sesuai dengan sebanyak mungkin, meregangkan gambar serta mengulanginya untuk mencapai pengulangan yang mulus
• Sekali lagi, nilai space, sama seperti berulang, tetapi nilai ini menambahkan spasi di antara setiap area tepi untuk membuat pola yang mulus.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang perbatasan

.my-element {
  border: solid hotpink;
}