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 is you get a faint glow around image when you try to use border-radius and border.
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.
What a difference it makes without that tacky haze around the image! Oh, but there’s more..
CSS gradient backgrounds seem to be a thing now.. so let’s try them out as an image border…
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.
Yeah, exactly. Styling a website for every browser out there is a
An excellent cheat however is using a quality CSS Gradient Generator to save some time.
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!
Now you can let your imagination run.. but please consider the bandwidth!