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
Manakah warna batas default?
black
currentColor
white
historicColor
.my-element { border: solid hotpink; }
Berapa lebar {i>default<i} dari {i>border<i}?
solid
medium
1px
border-inline: 1px solid
akan...