Menggunakan elemen pseudo
Anda dapat memposisikan elemen pseudo sedemikian rupa sehingga berada di belakang elemen, dan lebih besar, membuat efek perbatasan dengan latar belakangnya sendiri, atau lebih kecil dan di dalam (tapi pastikan konten ditempatkan di atas).
Elemen yang membutuhkan banyak batas harus memiliki batas dan posisi relatifnya sendiri.
.borders ( position: relative; border: 5px solid #f00; )Batas sekunder ditambahkan dengan elemen semu. Ini diatur dengan pemosisian absolut dan inset dengan nilai atas / kiri / bawah / kanan. Ini juga akan memiliki batas dan disimpan di bawah konten (melestarikan, misalnya, pemilihan teks dan tautan yang dapat diklik) dengan memberinya nilai indeks-z negatif. Hati-hati dengan indeks-z negatif, jika ini berada dalam elemen lain dengan warna latar belakangnya sendiri, ini mungkin tidak berfungsi.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Lihat Pen gbgRqZ oleh Chris Coyier (@chriscoyier) di CodePen.
Anda dapat melakukan perbatasan ketiga dengan menggunakan :afterkelas pseudo juga. Perhatikan secara khusus bahwa Firefox 3 (sebelum 3.6) mengencangkannya dengan mendukung :afterdan :before, tetapi tidak membiarkannya diposisikan secara mutlak (sehingga terlihat aneh).
Menggunakan garis besar
Meskipun itu sedikit lebih terbatas daripada batas (mengelilingi seluruh elemen tidak peduli apa) garis besar adalah batas bebas ekstra.
.borders ( border: 5px solid blue; outline: 5px solid red; )Menggunakan box-shadow
Anda bisa menggunakan box-shadow untuk membuat efek perbatasan, dengan membuat bayangan offset dan memiliki 0 blur. Selain itu, dengan nilai pemisah koma, Anda dapat memiliki "batas" sebanyak yang Anda suka:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Lihat Pen xbgreX oleh Chris Coyier (@chriscoyier) di CodePen.
Menggunakan latar belakang yang terpotong
Anda bisa membuat latar belakang elemen berhenti sebelum padding. Dengan cara itu batas normal elemen dapat terlihat seperti batas ganda.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Di masukan:
Lihat efek perbatasan Pena Ganda yang diaktifkan oleh Chris Coyier (@chriscoyier) di CodePen.