before ile çoklu kenar çizgisi

:before kullanarak çoklu kenar çizgisi yapmak

by fatihhayri

HTML

<div id="cokluKenarCizgisi">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Quisque dui arcu</a>, tristique a fringilla ut, hendrerit ac felis. Nulla in elit ipsum. Sed vulputate lectus sit amet diam sollicitudin vitae tincidunt augue bibendum. Quisque volutpat ipsum a purus euismod rhoncus eleifend massa ornare. </div>

CSS

#cokluKenarCizgisi {
    border: 5px solid #FF0000;
    padding: 20px;
    position: relative;
    z-index: 10;
}

#cokluKenarCizgisi:before {
    position: absolute;
    border: 5px solid #06F;
    content: "";
    display: block;
    bottom: 0;
    left: 0;   
    right: 0;
    top: 0;
    z-index: -1;
}