Fancy CSS Image Borders With Border-Radius

If you’ve ever tried to use border-radius and border on an image, like me you’ve probably felt frustrated. That’s why I’m not only going to show you a work-around, but also throw in some extra fancy stuff as well.

Are you ready to to fancy-fi some images with borders?

The Problem

The problem is you get a faint glow around image when you try to use border-radius and border.

Petrie looks quite dapper taking an afternoon break in his new sweater. — Not really what we were looking for..

 img {
 	border-radius: 999em;
 	border: 10px solid #000;
 }

The CSS Fix

The work-around to remove that faint glow isn’t quite what you’d think. Instead of trying to nest the image inside another element, or manually editing every image in photoshop to achieve the proper look.. we’ll use padding and a background color instead.

 img {
 	border-radius: 999em;
 	border: 10px solid #000;
 	background: #000;
 }

What a difference it makes without that tacky haze around the image! Oh, but there’s more..

Gradients!

CSS gradient backgrounds seem to be a thing now.. so let’s try them out as an image border…

The HTML

 <!-- Wrap in div because Internet Explorer sucks -->
 <div class="gradient">
 	<img loading="lazy" src="//fatpony.me/images/petrie-powderpuff.jpg" height="350" width="350" alt="Petrie the Powderpuff" />
 </div>

We have to add a wrapper around our image to make this effect work properly in Internet Explorer. By adding a wrapper you want to make sure you use a class to style the elements instead of inline CSS so future changes (if necessary) can be done more easily.

The CSS

 div.gradient {
 	border-radius: 999em;
 	width: 100%;
 	height: auto;
 	padding: 15px;
 	line-height: 0;
 }
 img {
 	border-radius: 999em;
 	width: 100%;
 	height: 100%;
 	margin: 0;
 	background: #b3dced; /* Old Browsers */
 	background: -moz-linear-gradient(left, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* FF3.6+ */
 	background: -webkit-gradient(left top, right top, color-stop(0%, #b3dced), color-stop(50%, #29b8e5), color-stop(100%, #bce0ee)); /* Chrome, Safari4+ */
 	background: -webkit-linear-gradient(left, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* Chrome10+,Safari5.1+ */
 	background: -o-linear-gradient(left, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* Opera 11.10+ */
 	background: -ms-linear-gradient(left, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* IE 10+ */
 	background: linear-gradient(to right, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* W3C */
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=1 ); /* IE6-9 */
 }

Yeah, exactly. Styling a website for every browser out there is a ~~bitch~~ daily battle.

An excellent cheat however is using a quality CSS Gradient Generator to save some time.

Imageception™

You thought that was it? Oh, no folks.. hold onto your panties (or boxer-briefs) cause we’re going Inception on our css image borders!

The HTML

 <!-- Wrap in div because Internet Explorer sucks -->
 <div class="imageborder">
 	<img loading="lazy" src="//fatpony.me/images/petrie-powderpuff.jpg" height="350" width="350" alt="Petrie the Powderpuff" />
 </div>

The CSS

 div.imageborder {
 	border-radius: 999em;
 	width: 100%;
 	height: auto;
 	padding: 20px;
 	line-height: 0;
 	background-image: url('//fatpony.me/wp-content/uploads/2014/11/mylittleponies-bg-tutorial.jpg');
 	background-size: ; /* Adjust the scale of your border image */
 }
 img {
 	border-radius: 999em;
 	height: 100%;
 	width: 100%;	
 	margin: 0;
 }

Now you can let your imagination run.. but please consider the bandwidth!

The Problem

The CSS Fix

Gradients!

The HTML

The CSS

Imageception™

The HTML

The CSS

Erica Franz

Comments