Fat Pony

WordPress Developer & Designer

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.

Petrie looks quite dapper taking an afternoon break in his new sweater.
Now we’re talking image borders with border-radius!

 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…

Petrie looks quite dapper taking an afternoon break in his new sweater.
Petrie looks quite dapper taking an afternoon break in his new sweater.
Petrie looks quite dapper taking an afternoon break in his new sweater.

 

The HTML

 <!-- Wrap in div because Internet Explorer sucks -->
 <div class="gradient">
 	<img 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!

Petrie looks quite dapper taking an afternoon break in his new sweater.
Petrie looks quite dapper taking an afternoon break in his new sweater.
Petrie looks quite dapper taking an afternoon break in his new sweater.

 

The HTML

 <!-- Wrap in div because Internet Explorer sucks -->
 <div class="imageborder">
 	<img 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!

Erica Franz

I'm obsessed with WordPress, figuring shit out, working out till my brain goes numb, using code names and inventing new curse words.

I work with the incredible team behind OptinMonster, Soliloquy, and Envira Gallery. Living in the Pacific North West with my husband and 5 dogs.

Comments

  1. It looks very cool, CSS is very important when you want to build a website, very impressive examples of the usage of CSS, i’ll use it in one of my websites to make it looks great many, thanks

    2. Back to Top