Dev Stack Source

Answer : You can add multiple borders using pseudo elements, and then place them around your original border. No extra markup. Cross-browser compatible, this has been around since CSS 2.1. I threw a demo up on jsfiddle for you....note, the spacing between border colors is there for the example. You can close it by altering the number of pixels in the absolute positioning. .border { border:2px solid #36F; position:relative; z-index:10 } .border:before { content:""; display:block; position:absolute; z-index:-1; top:2px; left:2px; right:2px; bottom:2px; border:2px solid #36F } http://jsfiddle.net/fvHJq/1/ Use box shadow fo 2nd border. div.double-border { border: 1px solid #fff; -webkit-box-shadow: 0px 0px 0px 1px #000; -moz-box-shadow: 0px 0px 0px 1px #000; box-shadow: 0px 0px 0px 1px #000; } In this case box-shadow does not ignore border-radius property like outline does A very simple solution you could use as...

Answer : Adjusting the background-size is permitted. You still need to specify width and height of the block, however. .pdflink:after { background-image: url('/images/pdf.png'); background-size: 10px 20px; display: inline-block; width: 10px; height: 20px; content:""; } See the full Compatibility Table at the MDN. Note that the :after pseudo-element is a box, which in turn contains the generated image. There is no way to style the image, but you can style the box. The following is just an idea, and the solution above is more practical. .pdflink:after { content: url('/images/pdf.png'); transform: scale(.5); } http://jsfiddle.net/Nwupm/ Drawbacks: you need to know the intrinsic dimensions of the image, and it leaves you with some whitespace, which I can't get rid of ATM. Since my other answer was obviously not well understood, here's a second attempt: There's two approaches to answer the question. ...