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.
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..
Gradients!
CSS gradient backgrounds seem to be a thing now.. so let’s try them out as an image border…



The HTML
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
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.
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
The CSS
Now you can let your imagination run.. but please consider the bandwidth!
Comments
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