Aug032012

How To Get Border Radius With Internet Explorer

Posted in Web Design

During building this site, i used some sections with a border radius on the elements, and some of them also have the background gradient effects. In my testing phrases I realized that that if I put a border radius on an element, a border on it, and also the gradient effect, in Internet Explorer it would show a square / rectangle box with the border radius outlined with the border color. What I ended up doing was just taking out the gradient effect for IE, and when you add a box-shadow effect it gives it a gradient effect without actually using the IE filters to use it

Below is some of my coding for this to work, and it will give you an idea of how to apply a gradient effect in IE with the border radius as well. This is a solution that I found for IE 8, I have no other ways to test in other versions of IE at this time.

Link
a {
	padding:7px; 
	border-radius:10px;
	-moz-box-shadow: inset 3px 10px 20px #888; 
	-webkit-box-shadow: inset 3px 10px 20px #888;
	box-shadow:inset 3px 10px 20px #888;
	border-color:#444; ;color:#ddd;
	background:#111;
	background-image: -moz-linear-gradient(top, #111,#444);
	background:linear-gradient(top, #111, #444);
	background-image: -o-linear-gradient(top, #111 0%,#444 100%); 
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#444));
}

I'll show a screen shot later as to what it looks like in IE, but this should give you a basic idea of how to use the box-shadow effect to your advantage for IE to make a gradient effect on rounded tables.


No Comments Found

Leave a Comment Below







If someone replies to your comment you'll get an email about it (optional)

About Commenting

  • You're email address will not be shown
  • HTML is disabled
  • Fields marked with (*) are required
  • If you have a Gravatar account, you gravatar will be displayed here.
  • All comments have to be approved before showing up on the site