This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to make rounded border in IE8 with CSS?
I set this code for Border. I need to set rounded corners for this border.
This code works with E9, I need it to work in old browser like IE6, IE7, IE8
My code in CSS
border-radius: 11px 11px;
border:1px solid #373737;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
I suggest CSS3 PIE - http://css3pie.com/
PIE makes Internet Explorer 6-9 capable of rendering several of the
most useful CSS3 decoration features.
There is no support of border-radius in older browsers, you got to use scripts such as CSS3Pie to get it working in them.
Be aware that in your CSS, you will have to use behaviour property which isn't valid and will cause your CSS not to validate against W3C Validator.
Related
border-radius is a CSS3 property and it is used to make rounded corners. I wanted to make corners of one of my images rounded.
So I styled my image using CSS as below
#Images{
margin-top:20%;
margin-left:20%;
border:2px solid #BC8F8F;
padding:2px;
border-radius:40px;
}
I got the result as expected (with rounded corners) when this is run in firefox 26.0, chrome 32.0.1700.102 and IE 9.0.
But I found the below styling in a blog which defines border radius separately for firefox and webkit (I guess webkit is chrome and safari, correct me if I am wrong)
div{
background-image: url(beach.jpg);
width: 375px;
height: 500px;
border: 8px solid #666;
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
}
Why should we define border-radius for each and every browser when we get the result without doing it?
TL;DR: You shouldn't.
Vendor prefixed properties (-something-) are experimental implementations. They are not standard CSS (although the naming convention is blessed by the CSS specification to avoid conflicts with other experiments).
They are used before a property becomes standard so that authors can try it out and provide feedback to help develop the specification (and find bugs in the particular browser's implementation).
border-radius has been supported through a standard property for a long time. There is no reason to use experimental vendor prefixed versions of the property as it is no longer experimental.
The CSS 2.1 specification says:
Authors should avoid vendor-specific extensions
… since experimental implementations are designed for experimenting with, not use in general websites. They might do different things in different versions of a browser as the specification is developed and they should become unsupported in the future as the standard versions take over.
According to http://caniuse.com/border-radius, you don't have to use prefixes.
This question already has answers here:
Text Shadow in Internet Explorer?
(4 answers)
Closed 10 years ago.
I'm using following in CSS to outline my fonts with some border but this doesn't work in IE, is there any possibility, I can do the similar stuff so that this works in IE. At present, this works well in Chrome, FF, Safari.
.ItemPrice {
font-size: 40px;
color: #E8C61E;
-webkit-text-stroke: 1px #B2412F;
text-shadow: -1px 0 #B2412F, 0 1px #B2412F, 1px 0 #B2412F, 0 -1px #B2412F;
}
As these are prices coming out dynamically, I can't use images. If anyone could help me, it would be great.
Adding more description to it as people marked it duplicate question.
I know that I can use Filter to create the shadow but that doesn't give a border like feel to the font.
If we play with multiple dropShadow Filters to create Border, the font gets cut off from the corners, which again doesn't look good.
There are JS plugins available for creating the Fonts with border but as the Price which I need to display has to be displayed multiple times on the same page so it makes it very slow using those JS plugins.
Thanks in advance.
you could make multiple text shadows with the filter:
filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
You could look into this, it works similar to css3 PIE but has some text shadow functionality. I have never used this specific one but it may be worth a shot.
http://www.fetchak.com/ie-css3/
i know border-radius property wont support in IE7.
Is there any css tricks to do border-radius in IE7 browsers.
You can use CSS3 PIE to get this working.
To get it add the pie.htc file to the ROOT of your site. In your CSS file where you want to use border-radius add the following code:
behavior: url(path/to/PIE.htc);
In normal CSS the url is relative to the CSS file. For htc files it is relative to the ROOT of your website. This is important as it won't work otherwise. Blame Microsoft.
NOTE:
If it's not working still then add this to your selectors:
position: relative;
z-index: 0;
There are plenty of "tricks" to get rounded corners in browsers that do not support the "border-radius" CSS property. Just do a google search for "rounded corners css". This one seems promising for instance.
Currently, IE 9 and 10 are the only versions of IE that support border-radius. IE 8 and below do not support border-radius.
Check this http://css3pie.com/
use make a curve border .ping image in photoshop and use it .....because border-radius-bottomleft ,border-radius-bottom right etc not work on ie6-8....
use that code for border-radius working well ....
**
background-color: #E8EDEF;
border-radius: 10px 10px 10px 10px;
display: block;
margin-left: 78px;
width: 591px;
behavior: url(pie/PIE.htc);
**
and also see for border-radius http://css3pie.com/
given in detail in document
I have a div with border radius, I write the CSS code for all the browsers:
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
but in IE it doesn't work!
What should I do?
Border radius does not work in IE until version 9.
See: Support for "border-radius" in IE
There are some suggestions on that answer as well as on Google for alternatives.
You may be required to use images for your rounded corners. You may be able to use a JavaScript based re-creation of rounded corners.
I think using PIE.htc for all css3 styles will be better. I have used it in many of my projects and works fine in IE7/8/9.
Here is the link. http://css3pie.com/ This will provide you various demos for that and it is really helpful.
Thanks.
If you're using IE8 or older, you have to do that with images or some sort of javascript plugin. If you're using IE9 or newer, then that code works perfectly fine.
Here are some jQuery plugins that could solve your problem: http://plugins.jquery.com/plugin-tags/border-radius
Nifty Corners works as well in IE8.
Here is an example: http://jsfiddle.net/jCm7T/1/
Can anyone tell me the the latest solution for implementing rounded corners with DIV tags? Is the PNG corner images still the best cross-browser solution? Is Jquery the best approach? How is everyone approaching the rounded corners problem?
Many thanks.
Erik
For most browsers, CSS3 provides a way.
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
No need for images anymore.
If you must support IE8 and earlier, here are a number of ways to accomplish rounded corners.
According to that Microsoft page:
Windows Internet Explorer 9
supports adding rounded corners to
elements using the border-radius
properties.
It also suggests these pages which claim to be updated:
25 Rounded Corners Techniques with CSS
CSS Rounded Corners 'Roundup'
Rounded Corners
Without having read all of these many approaches, I'd hazard a guess that there is no universal best solution at the moment. Until we can assume that pretty much all of our visitors have CSS3-compliant browsers, you have to make some choices.
The optimal solution at the moment is to use:
selector {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
That will work in "all" modern browsers including IE9, see: http://caniuse.com/#search=border-radius
By far the best workaround for older versions of IE is to use CSS3 PIE:
PIE makes Internet Explorer 6-8
capable of rendering several of the
most useful CSS3 decoration features.
PIE currently has full or partial
support for the following CSS3
features:
• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image
As you can see, you also get support for more CSS3 eye candy