Τριπλό border με χρήση CSS3

Κι όμως είναι εφικτό να δημιουργήσουμε αυτό το όμορφο εφέ, χωρίς τη χρήση εικόνας, απλά και μόνο με τη χρήση css. Πιο συγκεκριμένα με την χρήση της ιδιότητας :before και :after. Ας το δούμε στην πράξη:

Δημιουργούμε ένα div με id box

<div id="box">Κείμενο</div> 

Το CSS για το box:

#box {  
background: #f4f4f4;  
border: 1px solid #bbbbbb;  
width: 200px;  
height: 200px;  
margin: 60px auto;  
position: relative;
}

Σημειώστε ότι το position:relative είναι σημαντικό. Στη συνέχεια χρησιμοποιούμε την ιδιότητα :before και :after ως εξής:

#box:before {  
border: 1px solid white;  
content: '';  
width: 198px;  
height: 198px;  
position: absolute;  
}

To ύψος (height) και το πλάτος (width) πρέπει να είναι 200 px μείων 2 (το border δεξιά και αριστερά)

 

#box:after {  
content: '';  
position: absolute;  
width: 196px;  
height: 196px;  
border: 1px solid #bbbbbb;  
left: 1px; top: 1px;  
}

Ομοίως το ύψος και το πλάτος έχει ακόμα μία μείωση των δύο pixel. Η τελευταία παράμετρος διορθώνει το κεντράρισμα του δεύτερου (εσωτερικού) border.