Curved corner (border-radius) cross browser
Update 18 November , 2009: The htc file is updated by Nick F. Thanks man, you got time to check it out. Now supports FF, Chrome, Safari, IE6, IE7, IE8 (Os doesn’t matter).
This version of htc files can be found here and demo here
Update 17 August, 2009: This project is moved to Google Code. Please find the htc files on http://code.google.com/p/curved-corner. Links to htc file below will not work.
Update 16 July, 2009: htc file updated with support for IE8. Thanks to Kevin for coming up with a work-around. New htc file can be downloaded on border radius ie8.
Update 10 June, 2009: Some servers need to set MIME type for HTC to work this in IE6.
To do this, follow the steps.
1. Go to your cpanel and click the MIME Types link
2. Under MIME Type, add text/x-component
3. Under Extensions, add htc
4. Restart Apache Web server
As I’ve pledged, today I’m posting the Curved corner without any js stuff.
For firefox, you can set border-radius by prefixing “-moz” to the css property. And ofcource for webkit use “-webkit” . Now IE ?? .. As IE is not a good browser to work with css, we need to make it so. Here, you need to use a nice css hack. Some how I managed to have an htc file to make border-radius work in IE 🙂 . You can download it here. border-radius.htc .
The Demo
1 . I’ve just made: http://www.htmlremix.com/files/20080924-border-radius.zip
The CSS:
- .curved {
- -moz-border-radius:10px;
- -webkit-border-radius:10px;
- behavior:url(border-radius.htc);
- }
The HTML:
<div class="curved">Curvd div</div>
The explanation :
Do you really want an explanation for this simple 3 line css ?. I don’t think so. Ofcourse if you need, I can.
Browsers :
All browsers 🙂
Download
Many people failed to find a download link. So no one will miss it again now 🙂
Does a real crazy stunt with the background color.
It actually lays the background color of the div/H1 I want to set round corners to the very lowest z-index, UNDER any divs background it is nested in – so it seems to totally disappear. This in IE7. Have not tested IE8 or IE9.
Can you fix it?
Totally agree with Paul. It has real z-index issues on IE
Seconded.
I am contemplating redoing my CSS (one for real browsers, and using a conditional statement to cater to IE8, the nadir of the internet) and compelling people to use Firefox, Chrome, or anything else.
IE9 has some advantages, but it too has certain problems.
If only all companies would comply with open standards, completely and in good faith.
By the above codes did not work.
Worked by the following codes.
div.medium .blok .blokIc{
width:218px;
background: #2b1f2f;
background: -moz-linear-gradient(top, #2b1f2f 0%, #1d1420 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b1f2f), color-stop(100%,#1d1420));
background: -webkit-linear-gradient(top, #2b1f2f 0%,#1d1420 100%);
background: -o-linear-gradient(top, #2b1f2f 0%,#1d1420 100%);
background: -ms-linear-gradient(top, #2b1f2f 0%,#1d1420 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#2b1f2f’, endColorstr=’#1d1420′,GradientType=0 );
background: linear-gradient(top, #2b1f2f 0%,#1d1420 100%);
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
behavior:url(‘border-radius.htc’);
margin:-25px 0 0 1px;
padding-bottom:0;
float:left;
}
çalışmıyor.
Aşağıdaki Gibi Çalışıyor.
When I wrote does not work.
Works like the following.
div.medium .blok .blokIc{
width:218px;
background: #2b1f2f;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
behavior:url(‘border-radius.htc’);
margin:-25px 0 0 1px;
padding-bottom:0;
float:left;
}
If you’re having problems.
Download the latest from the svn in google code, don’t download from the files section, the last release was in 2009. I find that it needs a background-color or else it’ll appear as black.
To avoid any problems with IE 9, always use the css…
< ! --[if lt IE 9 ]>-- >
behavior: url(border-radius.htc);
re: my comment
it was supposed to say parent is unordered list
with background white and I want to make the list items round, but when I try it the whole list goes white, do you have a solution for list items when the parent unordered list has background color white?
Hi, got rounded corners in IE8 🙂
Having one problem with element
the parent has background-color: #FFFFFF;
so when I use behavior:url(border-radius.htc);
for the ‘s, the entire list turns white.
Have you figured out a way around it and what did you do. I read above that you had a similar problem. I can’t change the background-color because it would ruin the whole design.
I tried to use the file but it doesn’t work until I change the URL to absolute path. It seems that relative path will make the file not working.
Used this for better result
Untitled Document
div.rtop, div.rbottom{display:block;background: #FFF}
div.rtop div, div.rbottom div{display:block;height: 1px;
overflow: hidden; background: #9BD1FA}
div.r1{margin: 0 5px}
div.r2{margin: 0 3px}
div.r3{margin: 0 2px}
div.rtop div.r4, div.rbottom div.r4{margin: 0 1px;height: 2px}
.rs1{margin: 0 2px}
.rs2{margin: 0 1px}
div.container{ margin: 0 10%;background: #9BD1FA}
Hi!
I am able to get the round corners on IE8.i used it for a textbox. But the problem is, i want to change the border colour on focus of this textbox.. So i tried to assign a different style sheet on click event.. but its not working ..
please help.
Below are my css class.
.Red {
border-color:red;
border-style:solid;
behavior: url(border-radius.htc);
border-radius: 5px;
}
.Green
{
border-color:Green;
border-style:solid;
behavior: url(border-radius.htc);
border-radius: 5px;
}
javascript files
function changeToGreenClass() {
var element = document.getElementById(‘TextBox1’);
element.className = “Green”;
}
function changeToRedClass() {
var element = document.getElementById(‘TextBox1’);
element.className = “Red”;
}
Not working with { position:relative; }
Just tried in IE8. No work-e-do. Borders disappear completely. I see it doesn’t work for anyone else either.
@Dan
I found that in IE8 several properties of parent elements in your CSS can cause what you are describing. Try commenting out CSS properties for parent elements of the element you want to add round-corners to. Then uncomment then until you find the one that causes the problem.
(in my case it was background color property of the HTML and a position:relative declaration in the parent div of my rounded corner element)
Good luck!
Michiel
Just tried under IE9 with “Browser mode IE7, document mode IE7” – no luck.
I bumped into a problem using border-radius on a website:
I couldn’t get the round round corners to show in IE 8 my borders simply dissapeared completely.
I also found why it happened.
My css contained the following line:
html, body, form { height:100%; width:100%; background-color: #fff; margin:0px; }
I discovered that assigning a background color to your HTML (not the body) screws up the behaviour of border-radius.htc in IE8.
I hope this comment is useful to someone.
It cost me half a day to figure this out 🙁
Cheerz 😉
Just tried to implement this on a WordPress site, no luck, still no rounded corners on the white page and the indent brown rule (page). This is the CSS:
#page {
background: #fff;
border: 6px solid white;
margin-top: 0px;
width:760px;
-moz-border-radius:10px; /*rounded corners on page border*/
border-radius:10px;
-webkit-border-radius:10px;
behavior: url(http://www.nubarcambridge.com/restaurant/wp-content/themes/twentyeleven/inc/border-radius.htc);
}
#indent-page {
border:2px solid #5e3d1f;
-moz-border-radius:10px; /*rounded corners on page border*/
border-radius:10px;
-webkit-border-radius:10px;
behavior: url(http://www.nubarcambridge.com/restaurant/wp-content/themes/twentyeleven/inc/border-radius.htc);
padding:6px;
}
This is the site:
http://www.nubarcambridge.com/restaurant
What am I doing wrong?
Thanks….
Sorry: Meant to say no rounded corners in IE 8…other CSS works find in FF, Safari, IE 9.
It does not work at all
What an awesome script. Worked great thanks a lot.
I used this code on this site: rbkdoc dot com, no problems in any browser. But I’m a noob, and I did do some uglifying to make it run on IE. When I used it on this site: sfhomeopath dot com, I got all the black stuff, but only on IE8 – It works perfectly otherwise. I took the code out, and I got square corners, but lost all the black stuff on IE. This code definitely caused the problem, but the difference between the sites (if you didn’t look) is the background layer. The black areas are directly related to the use of a background picture.
Doesn’t seem to work when a gradient filter is also applied as a background.
e.g. from the demo html file, I added a filter gradient:
.box1 {
background-color: #f0f0f0;
width: 533px;
height: 50px;
margin: 0 auto 15px auto;
padding: 30px;
border: 1px solid #d7d7d7;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
behavior: url(border-radius.htc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#BEB6A5′, EndColorStr=’#807A6F’);
}
Border radius don’t work for me as it was suggested,
my border div gone invisible ,while trying to curve its border in IE8. Please give me reason what was happened?.
Thanks,
Regards
not working on IE9 with IE7 compatibility mode…