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
Related
in Mozilla Firefox 24 i cannot use -moz-border-radius on my CSS style.
i have read from this article, they said
Support for -moz-border-radius* and -moz-box-shadow has been removed. Authors should use unprefixed border-radius or box-shadow instead
but it is for Firefox 13, how about in version 24? anyway, thanks.
Use border-radius: 5px 30px;and box-shadow: 0 1px 4px #222; from now on
My understanding is that you can stack both properties, as long as you put the -moz version first. If a particular version of Firefox doesn't like border-radius, it will fall back to the -moz version. And if a version doesn't like the -moz property, it will be superceded by the second call. (this works with -webkit-border-radius as well)
-moz-border-radius: 10px;
border-radius: 10px;
Check this out
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#Browser_compatibility
#box{
border:10px solid #000;
border-radius: 10px 40px 40px 10px;
width: 200px;
height: 100px;
background-color:#ccc;
}
check http://jsfiddle.net/E7kYt/ in your FF
standard border radius for all browsers can be created in border-radius.com
why Border radious is not supporting to chrome and IE10. can you give any solution please my code
/* Rounded Corner */
.tb5 {
border-radius:10px;
height: 18px;
width: 230px;
border: 3px solid #BADA55;
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 12px;
/* Firefox 1-3.6 */
-moz-border-radius: 12px;
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 12px;
}
Should work fine in the latest version of every browser, even without prefixes (source). Are you sure you're targetting the right HTML element?
<div class="tb5">
<p>Something here...</p>
</div>
Please try with -ms-border-radius:12px;
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 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 :)
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