Perbatasan sangat penting dalam desain/pengembangan web karena dapat menarik perhatian pengguna atau memisahkan konten di halaman web. Anda dapat menggunakan singkatan border jika ingin keempat border pada elemen HTML sama.
Di sisi lain, Anda juga dapat menggunakan properti border color, border style, dan border-width longhand untuk membuat setiap border berbeda/unik. Saat Anda ingin menentukan warna batas, kami menggunakan warna batas, menggunakan lebar batas untuk menentukan lebar batas, dan menentukan apakah batas akan putus-putus, ganda, atau utuh menggunakan properti border-style.
Anda juga dapat menargetkan batas individu menggunakan properti seperti batas mulai blok dan batas atas
Perbatasan ganda adalah ketika dua garis paralel mengelilingi elemen HTML. Kedua garis tersebut dipisahkan oleh celah yang dapat dibiarkan transparan atau diisi dengan gambar atau warna latar belakang.
Sebagai contoh, kita dapat memiliki tombol sign-up/login yang dikelilingi oleh pembatas ganda.
Mengapa perbatasan ganda?
- Pemisahan: Anda dapat menggunakan batas ganda untuk meningkatkan keterbacaan dan kemampuan pemindaian halaman web dengan memisahkan elemen HTML yang berbeda. Misalnya, Anda dapat memiliki batas ganda untuk memisahkan elemen seperti header, body, dan footer pada halaman web.
- Daya tarik visual: Anda dapat menggunakan warna yang berbeda/kontras pada batas ganda untuk membuat elemen yang berbeda lebih menarik secara visual.
- Tampilkan hierarki: Anda dapat dengan jelas membedakan antara elemen penting dan kurang penting di halaman web menggunakan batas ganda.
- Kustomisasi mudah: Anda dapat membuat desain yang dipersonalisasi dan unik dengan bantuan pembatas ganda. Misalnya, Anda dapat mengubah warna atau lebar setiap garis.
- Penekanan: Dengan menggunakan properti pembatas ganda, Anda dapat menarik perhatian ke tautan atau tombol tertentu di halaman web.
Anda dapat menggunakan cara berikut untuk membuat batas ganda di CSS.
Menggunakan Properti gaya perbatasan
Properti border-style menetapkan gaya dari empat batas elemen. Kami menggunakan kata kunci ganda untuk mengatur gaya dalam kasus ini. Saat kami menggunakan kata kunci ganda, padding otomatis dibuat di antara dua batas.
Untuk tujuan demonstrasi, kami akan mengatur lebar batas menjadi 15px. Kami juga akan memilih warna perbatasan kami menjadi merah dan menunjukkan gaya perbatasan ganda.
Kode HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2> Border Property</h2> </div> </body> </html>
Kode CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border-width: 15px;
border-color: red;
border-style: double;
}
Outputnya adalah:
Menggunakan fungsi linear-gradient()
Fungsi ini menetapkan gradien linier sebagai gambar latar belakang. Hasilnya adalah transisi bertahap antara dua warna di sepanjang garis lurus. Kami menggunakan kata kunci untuk menandai titik awal garis gradien. Jika pesanan tidak ditentukan, nilai defaultnya adalah ke bawah.
Kode di bawah ini memberi kotak kita lebar batas 7px. Kami kemudian dapat menentukan gradien linier pada properti background dari setiap sisi kotak.
Kode HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>linear-gradient() function</h2> </div> </body> </html>
Kode CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
background: linear-gradient(to top, #8f0404 7px, transparent 1px),
linear-gradient(to bottom, #8f0404 7px, transparent 1px),
linear-gradient(to left, #8f0404 7px, transparent 1px),
linear-gradient(to right, #8f0404 7px, transparent 1px);
}
Outputnya adalah:
Menggunakan Properti Outline
Garis luar adalah garis yang ditarik di luar batas elemen. Ini mencapai efek batas ganda, dan kita dapat menggunakan garis tepi dan satu batas. Kita harus menggunakan outline-offset untuk menambahkan spasi antara border dan properti outline.
Kode HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Outline Property</h2> </div> </body> </html>
Kode CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 5px solid red;
outline: 5px solid blue;
outline-offset: -20px;
}
Halaman yang dirender akan muncul sebagai berikut:
Menggunakan properti box-shadow
Properti box-shadow menambahkan efek bayangan di sekitar bingkai elemen. Anda dapat memiliki beberapa efek bayangan kotak yang dipisahkan dengan koma. Mulailah dengan memastikan bahwa pengaturan offset dan blur adalah nol, lalu atur bayangan ke ukuran yang tepat.
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Box Shadow Property</h2> </div> </body> </html>
Kode CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
box-shadow:
0 0 0 5px red,
0 0 0 10px green;
}
Halaman yang dirender akan muncul sebagai berikut:
Menggunakan properti klip latar belakang
Properti background-clip menentukan seberapa jauh latar belakang harus diperluas dalam suatu elemen. Ekstensi dapat berada di border-box, padding-box, atau content-box.
Kode HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Background-Clip Property</h2> </div> </body> </html>
Kode CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
padding: 5px;
background-clip: content-box;
background-color: rgb(238, 152, 130);
}
Halaman yang dirender akan muncul sebagai berikut:
Menggunakan Elemen Pseudo
Pseudo-elements, diwakili oleh ::before dan ::after pemilih memungkinkan web designer untuk gaya bagian dari dokumen HTML tanpa menambahkan markup ke kode.
Kita dapat mengilustrasikan bagaimana menggunakan elemen semu untuk membuat perbatasan ganda menggunakan kode ini:
dokumen HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>pseudo property</h2> </div> </body> </html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 150px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
background-color: brown;
}
box{
background-color: rebeccapurple;
position: relative;
border: 8px solid red;
}
.box::before{
content: " ";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 8px solid green;
border-width: 6px;
border-color: green white green white;
width: 150px;
height: 100px;
}
Halaman yang dirender akan muncul sebagai berikut:
Contoh dunia nyata dari double-border CSS
Properti CSS batas ganda digunakan di banyak situs web. Anda harus menggabungkan properti double border dengan properti CSS lainnya untuk mendapatkan yang terbaik darinya. Berikut ini adalah dua contoh aksi perbatasan ganda;
Tombol “Keranjang” di Amazon
Amazon adalah salah satu nama terbesar di ruang e-commerce. Tombol gerobaknya memiliki CSS batas ganda untuk estetika visual dan mendorong pengguna untuk bertindak.
Perbatasan ganda muncul saat pengguna mengarahkan kursor ke tombol ‘gerobak’. Perbatasan juga terlihat saat Anda mengarahkan kursor ke menu navigasi Amazon.
tombol Mailchimp
Mailchimp adalah layanan pemasaran email yang memungkinkan pengguna membuat, meluncurkan, dan melacak kampanye. Situs webnya menggunakan efek batas ganda di berbagai bagian. Tombol daftar dan masuk memiliki batas ganda untuk ‘menciptakan’ rasa urgensi saat pengguna menelusuri.
Perbatasan di sisi bawah tombol-tombol ini menebal saat pengguna melewatinya dengan kursor.
Praktik terbaik saat menggunakan efek CSS batas ganda
Sangat mudah terbawa ketika Anda menggunakan CSS ganda. Tujuan akhirnya adalah untuk memastikan bahwa pengguna menavigasi dengan mudah dan menekankan area utama di situs Anda. Ikuti praktik terbaik berikut:
- Gunakan gaya yang konsisten: Jika Anda menggunakan batas ganda, pastikan gayanya konsisten di semua elemen. Misalnya, batas ganda dapat digunakan pada navigasi, ajakan bertindak, dan tombol daftar/masuk. Jika memungkinkan, pastikan Anda memiliki warna dan ketebalan margin yang sama di seluruh elemen dengan batas ganda.
- Pastikan batas ganda ini berfungsi di perangkat yang berbeda: Kita hidup di dunia tempat orang menjelajahi situs web dari ponsel cerdas, PC, dan tablet. Tes untuk memastikan batas ganda ditampilkan seperti yang diharapkan pada berbagai ukuran layar.
- Gunakan dengan hemat: Anda mungkin tergoda untuk menggunakan efek CSS tertentu secara berlebihan setelah menemukannya untuk pertama kali. Namun, double CSS sesuai dengan berbagai elemen di halaman web. Hanya gunakan properti ini di area yang memberikan nilai tambah pada desain.
Kesimpulan
Kami telah menyoroti pendekatan utama yang dapat Anda gunakan untuk membuat batas ganda di CSS. Pilihan pendekatan akan bergantung pada apa yang ingin Anda capai dengan batas ganda dan preferensi Anda. Anda dapat memutuskan untuk tetap menggunakan satu atau kombinasi dari beberapa gaya batas ganda pada halaman yang sama.
Anda dapat melihat sumber daya CSS ini untuk memahami Cascading Style Sheets secara mendetail.
