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
Manakah warna batas default?
black
white
currentColor
text-color
yang dihitung, dan merupakan warna batas default.historicColor
.my-element { border: solid hotpink; }
Berapa lebar default batas?
1px
medium
solid
border-style
, bukan nilai border-width
.border-inline: 1px solid
akan...
border-block
akan menjadi bagian atas dan bawah.