Pseudoelementtien käyttö
Voit sijoittaa pseudoelementin siten, että se on joko elementin takana ja suurempi, jolloin reunatehoste on oma tausta tai pienempi ja sisällä (mutta varmista, että sisältö sijoitetaan ylhäältä).
Elementillä, joka tarvitsee useita rajoja, tulisi olla oma raja ja suhteellinen sijainti.
.borders ( position: relative; border: 5px solid #f00; )Toissijainen reuna lisätään pseudoelementillä. Se asetetaan absoluuttisella paikannuksella ja asetetaan ylä- / vasen- / ala- / oikea-arvoilla. Tällä on myös raja ja se pidetään sisällön alla (säilyttäen esimerkiksi tekstin valittavuuden ja linkkien napsautettavuuden) antamalla sille negatiivisen z-indeksiarvon. Varo negatiivisen z-indeksin suhteen, jos tämä on vielä jonkin toisen elementin sisällä, jolla on oma taustaväri, tämä ei välttämättä toimi.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Katso Chris Coyierin (@chriscoyier) kynä gbgRqZ CodePenistä.
Voit tehdä kolmannen reunan myös :afternäennäisluokan avulla. Huomaa erityisesti, että Firefox 3 (ennen 3.6) ruuvaa tämän tukemalla :afterja estämällä :beforeniiden sijainnin ehdottomasti (joten se näyttää oudolta).
Käyttämällä ääriviivaa
Vaikka se on hieman rajoitetumpi kuin raja (kulkee koko elementin ympäri riippumatta), ääriviivat ovat ylimääräinen ilmainen raja.
.borders ( border: 5px solid blue; outline: 5px solid red; )Laatikon varjon käyttäminen
Voit käyttää ruutu-varjoa rajaefektin tekemiseksi tekemällä varjon siirtymän ja 0 epätarkkuutta. Lisäksi pilkuilla erotetuilla arvoilla voi olla niin monta "reunaa" kuin haluat:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Katso Chris Coyierin (@chriscoyier) kynä xbgreX CodePenistä.
Leikatun taustan käyttäminen
Voit saada elementin taustan pysähtymään ennen täytettä. Tällä tavoin elementtien normaali raja voi tavallaan näyttää kaksoisrajata.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Tulossa:
Katso Chris Coyierin (@chriscoyier) kynän kaksinkertaisen reunan vaikutus CodePenissä.