Fancy Inset CSS Image Borders | Evan Byrne’ Writings 

Before

After



The HTML Markup

In a perfect world we would only use a single img tag with a class attribute. This is not a perfect world. Because the img tag does not support the CSS pseudo-element :after, we have to wrap our image in a span.

<span class="fancy">< img src="dingo.jpg" /></span>

The CSS

The first step is to apply a simple reset to our span and img tags.

span,img{padding:0;margin:0;border:0;}

Next, we style the wrapper element.

.fancy{
position:relative;
display:inline-block;
font-size:0;
line-height:0;
}

.fancy:after{
position:absolute;
top:1px;
left:1px;
bottom:1px;
right:1px;
border:1px solid rgba(255,255,255,0.5);
outline:1px solid rgba(0,0,0,0.2);
content:&amp;quot; &amp;quot;;
}