Menggunakan elemen semu
Anda boleh meletakkan elemen semu sehingga berada di belakang elemen, dan lebih besar, membuat kesan sempadan dengan latar belakangnya sendiri, atau lebih kecil dan di dalam (tetapi pastikan kandungan diletakkan di atas).
Elemen yang memerlukan berbilang sempadan harus mempunyai sempadan dan kedudukan relatifnya sendiri.
.borders ( position: relative; border: 5px solid #f00; )Batas sekunder ditambahkan dengan unsur semu. Ia ditetapkan dengan kedudukan mutlak dan dimasukkan dengan nilai atas / kiri / bawah / kanan. Ini juga akan mempunyai sempadan dan disimpan di bawah kandungan (menjaga, misalnya, pemilihan teks dan kebolehklik pautan) dengan memberikan nilai indeks z negatif. Berhati-hati dengan z-indeks negatif, jika ini berada dalam elemen lain dengan warna latarnya 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 juga boleh melakukan perbatasan ketiga dengan menggunakan :afterkelas pseudo. Perhatikan khas bahawa Firefox 3 (pra 3.6) mengacaukannya dengan menyokong :afterdan :before, tetapi tidak membiarkannya diposisikan sepenuhnya (sehingga kelihatan pelik).
Menggunakan garis besar
Walaupun sedikit lebih terhad daripada sempadan (merangkumi keseluruhan elemen tidak kira apa) garis besarnya adalah sempadan percuma tambahan.
.borders ( border: 5px solid blue; outline: 5px solid red; )Menggunakan bayang-bayang kotak
Anda boleh menggunakan bayang-bayang untuk membuat kesan sempadan, dengan membuat bayangan mengimbangi dan 0 kabur. Selain itu, dengan nilai pemisah koma, anda boleh mempunyai "sempadan" 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 dipotong
Anda boleh membuat latar belakang elemen berhenti sebelum mengayuh. Dengan cara itu elemen normal boleh kelihatan seperti dua sempadan.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Pada input:
Lihat kesan Pen Double border oleh Chris Coyier (@chriscoyier) di CodePen.