I am using this code
-moz-border-radius: 15px;
border-radius: 15px;
For creating rectangular shape using CSS. It works fine in Mozilla FireFox but it is not working in Internet Explorer or other browsers. If you have any solution please guide me. Thanks.
Try:
-moz-border-radius: 15px; /* FF1+ */
-webkit-border-radius: 15px; /* Saf3-4 */
border-radius: 15px; /* Opera 10.5, Saf5, Chrome */
For IE: Until IE 9 it is not supported
Use this:
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-border-radius: 15px; /*for webkit based browsers..*/
In IE9, border-radius works (to the best of my knowledge, I believe)..
For previous versions of IE, just go through this link : http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
and this: http://code.google.com/p/curved-corner/
Copy-pasting from that website:
.rounded-corners {
behavior: url(/css/border-radius.htc);
border-radius: 15px;
}
You can find the file here : http://code.google.com/p/curved-corner/downloads/detail?name=border-radius.htc
Related
I have been struggling with IE8 issue's and came across this issue of Rounded corners ,
Where all the browsers would accept border-radius except IE8.
font-size: 12px;
margin-left: 7px;
margin-top: -13px;
border-radius: 10px 10px 10px 10px / 5px 10px 5px 10px;
After a long struggle i have resolved this issue,
Downloaded : http://css3pie.com/
Used it in CSS as below:
font-size: 12px;
enter code here
-webkit-border-radius: 5px; /* Chrome */
position: relative;
z-index: 1;
border-radius: 5px; /* CSS3 */
-moz-border-radius: 5px; /* Mozilla */
behavior: url(http://dev.intervalorders.com/pie/PIE.php);
border-radius isn't supported by IE8: http://caniuse.com/#feat=border-radius
Internet explorer does not support border-radius. But you can achieve it by implementing some hacks. Check this link for help.
Why everyone wrote "border-radius isn´t support in IE or in IE8" etc..? IE9 support border-radius and lower version of IE support border-radius with PIE and this theme is about PIE not about default support border-radius in IE8 or older.
And answer on question:
-webkit-border-radius: 6px 6px 6px 6px; // simply "6px" is ok too as in another CSS function
-moz-border-radius: 6px 6px 6px 6px; // simply "6px" is ok too as in another CSS function
border-radius: 6px 6px 6px 6px; // simply "6px" is ok too as in another CSS function
behavior: url(funkce/PIE.php); //change link on your local folder where you have PIE.php (in this file is include PIE.htc that alow you use PIE without change .htacces file. For that you must have PIE.php file and PIE.htc file too.)
I want to add rounded corners to my div in firefox.
Ive tried:
-moz-border-radius: 20px;
and its not working.
Pls, does anyone have any alternative solutions?
Thanks
newer versions of firefox support simply
border-radius: 20px;
Did you try that?
Otherwise I'll need to see some more of your css.
Put all the below three in your css
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
Some older versions use -moz and -webkit , but recent browser releases adopt CSS3 way of styling.
source : http://www.the-art-of-web.com/css/border-radius/
As #vidiya mentioned
always make sure you cover all your basis:
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
i'd suggest looking at LESS or SASS so that you can then use mixins (functions within CSS)
//From LESS
.rounded (#round:"4px") {
-moz-border-radius: #round;
-webkit-border-radius: #round;
border-radius: #round;
}
Does anybody knows website that will automaticaly fix my css for more browser compatibility
For example: if in my css is written
div
{
border-radius: 10px;
}
Convert to
div
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
You can use vendor prefix JS for this http://leaverou.github.com/prefixfree/
I have a question , i need something like this
background: -webkit-gradient(linear, left bottom, left top, from(#1e3c84), to(#2a5bd0)) #1CA6D6;
border-radius: 3px;
border-bottom: 3px solid #021748;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-khtml-border-radius: 3px;
-ms-border-radius: 3px;
margin-right: 5px;
But in CSS2 ? to show in IE correctly and other browsers
How i can do that? what is the properties or i can do with image? how? or something similar
very thanks!!
All modern browsers support rounded corners and gradient. The older versions of ie can support these features using scripts like css3pie.
Border radius doesn't work in older browsers... you will have to draw the corners yourself, slice them and then build the div or button yourself :)
http://caniuse.com/#search=border-radius
http://www.search-this.com/2007/02/12/css-liquid-round-corners/
Update
Or use #Sotiris link :)
Curve border is working on Firefox ,Google Chrome but not working on IE?any idea how to do make it work ?
-moz-border-radius-bottomleft:2px;
-moz-border-radius-bottomright:92px;
-moz-border-radius-topleft:92px;
-moz-border-radius-topright:2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 92px;
-webkit-border-top-left-radius: 92px;
-webkit-border-top-right-radius: 2px;
Unfortunately IE6-IE8 do not support rounded borders. Instead you would need to use something like CSS3PIE.
IE9 however DOES understand border-radius
Update further to comment that it 'won't work' - here is a quick step-by-step (this is a very simple, high-level sample.
Download CSS3PIE at http://css3pie.com/download-latest
Save the .htc file in the root of your site
Lets say you have a div with the id of foo:
<div id="foo">Hello, I'm rounded</div>
Your CSS for this could be:
#foo { width: 500px; height: 200px; background: blue; -moz-border-radius: 12px; /* FF1-3.6 */
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ }
You simply need to add one more rule to the bottom of that CSS, as follows behavior: url(/PIE.htc);
This will cause CSS3 to apply your border-radius rules to IE6-8.
It will only work in IE9, and you have to use the CSS3 standard.
Support for "border-radius" in IE
-moz and -webkit won't work in IE ever, since they are for other render engines.
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....only border-radius property work in ....
background-color: #E8EDEF;
border-radius: 10px 10px 10px 10px;
display: block;
margin-left: 78px;
width: 591px;
behavior: url(pie/PIE.htc);
border-radius-bottom right*/ not working in ie6-8