safari css border radius bug

Safari bug, border-radius with overflow hidden and image scale zoom animation

A short article for a CSS Safari hack for zoom overflow and border-radius using -webkit-mask-image.

How to fix the safari CSS border-radius bug on a zoom with overflow hidden on the parent container?

It’s a little bug happening only on Safari. To fix it, just add the following on the parent container class

You would also have overflow: hidden; on the parent container.

Bye-bye Safari bug!

Copyright © 2016-2024. All rights reserved. Designed and coded by Denis Bouquet

CSS Rounded Corners In All Browsers (With No Images)

In the past two years, increased browser support has transformed CSS3 from a fringe activity for Safari geeks to a viable option for enterprise level websites.

While cross-browser support is often too weak for CSS3 to hold up a site’s main design, front-end developers commonly look to CSS3 solutions for progressive enhancement in their sites. For instance, a developer might add a drop-shadow in Firefox, Safari and Chrome using -moz-box-shadow and -webkit-box-shadow , and then be comfortable with this design enhancement falling off for IE users.

But wouldn’t it be great if IE users could see the better version of the page? Fortunately there are cross-browser hacks for the more common CSS3 attributes. These hacks not only allow CSS3 attributes to work in all browsers, but in turn allow designers and developers to use CSS3 in the central styling of their sites.

In this article we’ll walk through getting rounded corners working in all browsers. Firefox, Safari and Chrome are easy with the border-radius property, but we’ll have to jump through some extra hoops to get it working in IE and Opera .

After only a few compromises, we will have CSS rounded corners working in all browsers, and without using any images. Welcome to the ‘No Image UI Club’!

Update – With Opera 10.5, we no longer have to jump through any hoops at all! Details below

The easy part – Firefox, Safari & Chrome

It’s best to avoid hacks if at all possible, and luckily Firefox, Safari and Chrome all support rounded corners through native CSS methods. Let’s apply a border-radius of 20 pixels to everything with the class ’rounded-corners’:

The first thing you might notice is that we defined the border-radius four times over. This is because current browser implementations aren’t completely refined according to W3C’s recommendations . Since each of the browsers still has its own unique idiosyncrasies, they apply prefixes such as -moz and -webkit .

In our example, -moz-border-radius is for Firefox, -webkit-border-radius is for Chrome/Safari and -khtml-border-radius is for older Konquerer browsers. Finally, the plain, old border-radius is future-proofing for whenever browsers properly support this attribute.

Applying border-radius here will round all the corners of the element, but you can also round certain corners and not others, or even use elliptical as opposed to perfectly round corners. Read this CSS-Tricks article for more info.

Rounded Corners in IE

None of the IEs support border-radius , not even IE8. When Microsoft released IE8, it’s almost as if they tried to catch up with browsers that were out when they released IE7. Don’t get me wrong, they fixed a lot and I wouldn’t trade even something small like display: table-cell for border-radius .

Fortunately, IE9 will have some CSS3 support, but until then we’ll have to use a border-radius hack in all IEs.

Although this hack is pretty fussy, I’ve gathered a couple guidelines that should help you debug any problems you may have.

First download this .htc solution: Curved Corner and upload it to your site. Then wherever you need a border radius, apply this CSS:

The path to border-radius.htc works differently than you may expect—unlike background-image paths which are relative to the stylesheet, this path is relative to the page from which you call the CSS.

That’s why it’s a good idea to avoid relative paths like we did above.

Hoops you have to jump through for IE:

• Any element with this hack needs to have position, so unless it already has a position, attach position: relative .
• It can act funny on some elements that are natively inline, even if you attach display: block , although not all the time (fun!).
• It also has issues with elements that don’t ‘have layout’. Attach zoom: 1; to get around this.
• You can only use this on elements with the same border radius applied to all their corners.
• When using this over anything translucent, a white ghost-line will stroke the rounded rectangle.
• Don’t even think about combining this with another IE hack, such as a box-shadow filter hack .

Additionally, if you try to use this hack dynamically with CSS or Javascript effects, it will give you problems if the element either doesn’t exist or has display: none or visibility: hidden (basically if it isn’t rendered on the page). With JS, you can apply the behavior: url(/css/border-radius.htc) via Javascript after you append the element to the page. When using a CSS effect like :hover , you’ll have to find a more creative way of hiding the content, such as overflow: hidden or z-index: -1 ; hiding an element like this will still cause the browser to render it, even if it isn’t visible to the user.

Unfortunately there are still certain drawbacks to using this hack with dynamic content, for instance there’s a flicker when changing the background color of an element with Javascript, and I haven’t found a way to change it at all using CSS’s :hover .

Another IE option:

You might also think about trying this method , although it seems more complicated to me.

Update – IE9

A few weeks ago at MIX10 , Microsoft announced IE9, and it seems like they may have finally gotten a few things right. Of particular interest is IE9’s support of CSS rounded corners, which actually surpasses the support of all other browsers. See here .

Making it work in Opera

Opera has gotten its market share up over 2% so I’m officially supporting it, and I think you should too.

Update – Opera 10.5

Opera 10.5 has been officially released for Windows, and will be on the way shortly for Mac. I’ve always been a bit skeptical of Opera as a viable browser, but this new version really changed my mind. Besides being extremely peppy, Opera 10.5 supports a wide variety of CSS3 properties , including CSS rounded corners, via border-radius (that’s right, no prefix).

If Opera doesn’t need a prefix (e.g. -opera-border-radius or -o-border-radius ), then that should mean that they are supporting border radius according to w3c’s specifications . However I haven’t been able to find anything to confirm this.

Workaround for Opera 10.10 and below

Additionally, there’s a decent workaround for Opera 10.10 and below. Since version 9, Opera has supported SVG generated images, which are actually super cool. This allows you to draw images using CSS and an encoded SVG string. Don’t worry, you don’t actually have to write it; here’s a really handy round corner generator for Opera . This generator will allow you to build the CSS SVG output you need to support border-radius.

The Opera method is a little more robust than the IE hack, in that it supports rounding only certain corners of an element, and can also be easily used dynamically with CSS and Javascript effects.

The downsides are that it can only be used with block colors for whatever has the rounded corners, and whatever it is sitting on. This means that you can’t use it over anything textured or semi-transparent. Additionally, this method causes a brief flicker while it loads up, which is mostly noticeable when using it dynamically.

Finally, the Opera method is a little annoying to use, since you have to generate new CSS output for every color combination.

These methods allow developers to support CSS rounded corners in all major browsers. As of IE9, IE will support border-radius, but until then this hack allows us to support it with only a few conditions (and for all the losers still on IE6). Opera has already implemented border-radius support since this article was written, but for versions prior to 10.5, the Opera SVG hack works well enough. (You may consider ignoring legacy support for Opera, due to its low market share.)

Although I wouldn’t necessarily recommend these hacks for a client’s site, they are pretty fun to play around with, and I ended up using them all over jonraasch.com . Combining this with some box-shadow and this CSS triangle trick , I was able to make it so that the only image assets my site loads are its background, logo and various content images. And I think that’s pretty cool :).

Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.

• Follow him on Twitter
• Buy him a beer

Tags: cross-browser , CSS , CSS hacks , css3 , IE , Opera , rounded corners , SVG , vector

This entry was posted on Thursday, February 4th, 2010 at 11:00 am in the category CSS .

You Might Also Like:

• Graceful Degradation With CSS3
• CSS Summit: The Good Parts
• Great Examples of Drawing With CSS
• CSS Data URIs – Use Them In All Browsers Now!
• Appending Style Nodes with Javascript
• A million ways to embed custom fonts (and keep typography nerds off your back)
• jQuery Video Game Remake: T&C Surf

211 Comments to “CSS Rounded Corners In All Browsers (With No Images)”

Wow your a life saver! thanks so much!

Nice article 🙂

Isn’t Opera 10.5 the current beta, and 10.10 the current release?

Wow, excellent tutorial… I’m off to practice!

wow!! this is super great!!!! thanks

Yeap, this one is a killer. Css3 will be a fun little toy for me, lots of creative inputs, but The browsers need to pick up the css3 much faster!

Brilliant, hope this works better than curvycorners, just insane why browsers don’t make this uniform as it’s such a useful feature.

Opera 10.5 is a future update I believe. Like when Firefox jumped from 3.0 to 3.5. Opera 10.10 is an upgrade from the current Opera 10. I know it’s shitty numbering, but hey … it’s Opera :p

great thx 4 sharing 😀

Nice article, thanks!

The Opera solution seems to have even more limits than the one for IE. I don’t think a site wouldn’t be “supporting Opera” if it showed normal corners to the visitor. How important can rounded corners be for the site?

Nice tutorial, but strictly speaking this isn’t CSS rounded corners in all browsers, as the .htc relies on javascript, so if you have it turned off you won’t see them…

Leave ie6 alone. Let him die in peace.

What about Curvy Corners? It also has some small bugs but it will autmatically figure out of there is used any -moz-border-radius and round the corners.

Wow, I hadn’t even realized Opera stopped support for it with their latest update. I had also been under the impression that they had adopted border-radius versus using a prefix? According to their dev blog they had always used border-radius sans prefix ( http://dev.opera.com/articles/view/css3-border-background-boxshadow/ ). You might have to view through Google’s cache because it seems to be down right now.

Anyway I just did a little digging around to check and it shows that it still supports border-radius for 10.10. http://www.opera.com/docs/specs/presto22/css/properties/ .

Where did you read that Opera dropped support for it?

Sorry for the double comment; Decided to upgrade to 10.10 and low and behold. That’s a big move to have dropped that support. 🙁

Poor Opera users will have to deal with pointy corners; I hate using alternatives just for other browsers. I let it downgrade instead.

BRAVO JOHN, BRAVO.

In my blog Gtricks I have to hatefully switch from rounded corners to rectangular boxes since it wasnt supported well everywhere and hence it wasn’t giving a same uniform feeling to users on all browsers.

IE8 has done henious crime for not implementing rounded corners.

Really great article. overcomes some IE pitfalls

@daniel15 + @Niels Matthijs – Yeah I was just baffled as to why they would remove the support, but what you’re saying makes more sense, that 10.5 is the beta and 10.10 the current release (really confusing versioning tho…)

@snlr – The nice thing about the Opera hack is that it supports rounding some corners and not others, which is something I use often, and it additionally works better dynamically. But yeah it’s way more annoying to use.

@ben – Good point on .htc using Javascript, but I stand by my catchy title 🙂

@jordan – My mistake, 10.5 is a ‘pre-release alpha’ and 10.10 is the current release. Kooky version numbers… Out of curiosity, have you gotten any of those properties to work with Opera sans-prefix?

@Romi – Amen brother!

“10.5 is the beta and 10.10 the current release (really confusing versioning tho…)”

How is this confusing? 10.5 (10.50) is greater than 10.10.

@c. – IMO version numbers shouldn’t be treated like decimals. 10.5 should be followed by 10.6, 10.7, and then 10.10, 10.11, etc. Otherwise you’re forced to jump to version 11 after 10.9, even if it doesn’t make sense.

This version should be numbered 10.1.0 if that’s what they’re going for.

And if they should be treated like decimals, wouldn’t you reduce 10.10 to 10.1?

Microsoft and Opera can build better browsers and more importantly their users can get better browsers. No hacks. They can have a square look.

I’m having some issue with this hack. I have a background image (w/ placement) but when I use this hack it automatically repeats the whole image.

How can I get around it?

IE9 supports border-radius in the same fashion as Opera 10.5

http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx

Half of the comments mentions Opera, that wouldn’t happen even an year ago… it’s a good thing. Opera 10.5 will be out by march, with a new render engine that supports rounded corners. The alpha is very usable and by far the best version of this browser.

Thanks for clarifying on the versions there! I’ll have to revert back to the alpha release to double check. Truthfully, I never actually *looked* to see the support. Rather I added the support sans prefix due to numerous articles announcing Opera actually using prefexless border-radius and having seen it’s support on their site.

I’ll let you know 🙂

thanks for the info… it helps me a lot

Too bad it doesnt work in ie6, the most saturate browser in the market.

@christoff – The .htc hack described above works just fine in IE6, I’ve actually had more trouble with it in IE8 than in IE6 if you can believe that. Also IE6 is by no means the most widely used browser on the market. See these stats

Just seems like too much work to add 5-6 CSS methods to get rounded corners. I may just stick with the image corners. Good post though. Good things to know. Ugh IE

Nice post and really useful! Thanks for the sharing!

I don’t understood because there are people that use today IE… when there are other browser that are better

Looking at your site in IE8, the Home, Portfolio, About, etc tabs have rounded tops, and square bottoms. If the border-radius.htc doesn’t support specifying the radius for each corner, how do you accomplish this on your site for IE8?

@Carlos – Yeah it’s a pain to implement, but in terms of filesize and load time you’re better off with the hacks. Provided you can deal with all the compromises they entail.

@Echoweb – I know it sucks that people use IE6 but think of it as a challenge :).

@JoshuaW – Hehe good question. To get the bottom corners square in IE, I used overflow:hidden on a wrapper div, then absolutely positioned the tab so that the rounded border rendered outside of the wrapper.

that picture of Bill Gates… HAHAHAHHA Thanks for the tutorial, and thanks for the laugh, it was so appropriate.

Pretty much I’ve decided, screw IE, people won’t get the full experience if they insist on using it. /not using the hack.

@tinos Hah yeah I was really proud of that pic of Gates & Ballmer, but it totally flopped on 4chan a few months back. Glad you like it :).

Hi, Great site loads of information for a newbee. Your round corners tut is great but I a using DNN 5 and have tried to implement on this page http://www.kidfit.com.au/test.aspx . Works well for firefox but not IE. Have I done this right code: .block { height: 550px; margin-right: 10px; padding: 20px; background: #ccc; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; #behavior: url('border-radius.htc');/* override for Microsoft Internet Explorer browsers*/ #border-radius: 15px;/* override for Microsoft Internet Explorer browsers*/ } Any help would be appreciated.

Kind regards, Buck

cool solution there mate!!, it has been some time I’m looking around something like this one, thanks for sharing…

How does one do individual corners with this solution in IE6+? Say I just wanted to do the top corners in order to create a “tab” feel to the element, border-top-right-radius, border-top-left-radius didn’t work…

Thanks for this tutorial. Everythings works fine, even in IE. Except for one thing: when I resize font in IE the layout breaks. A refresh makes it all alright again but ofcourse that’s not what I’m looking for.

I’ve tried to give the div with the class position:relative; but to no avail. Also zoom:1; doesn’t make it right.

Just use a bloody image. Workin every broswer and device and involves no dicking around. After 15 years of web design I am sick to death of hacks and alphas and workarounds. Just do what is simple and move on.

Thanks for such straightforward info. My question now tho is, how do you make rounded corners EASILY on form fields? I see some examples online, but most involve Javascript. Any tips on doing that in all CSS?

Great stuff, thanks – images are no good for flexible width layouts with patterned background, so this is extremely helpful. Works perfectly.

Same question as Marco above…what’s the best solution for IE to get rounded corners only on certain corners?

A nice clean, well explained and clearly detailed answer to the gnawing CSS rounded corners issue. Thanks!

how about using css2?

Wow.this is awsome. but i do have this problem.I tried it on a joomla project & it seems not to work on IE.I have done the styling on the template’s css & uploaded the .htc doc on the css directory.The code is exactly the same as yours exept for the colors.What is it that am doing wrong pliz!

Thanks Jon I’ve been banging at this for awhile and your article brought all the elements together to solve this problem easily.

To answer Joe and a few others who are having IE issues – the .htc solution is wonky at best I had to work at it for a bit to get it to display rounded corners consistently.

As to controlling individual rounded corners of different sizes as Jon said the .htc isn’t going to help you there as all corners have to be the same.

Take a look at Jons “hoops you have to jump through” for IE section of this article, everything he posted there should get you to 4 rounded corners.

Thanks for the clear summary Jon – it worked a treat for me.

Thanx Rolande.I got it working now in both IE, Firefox, Safari & even some other browsere.Thnx alot Jon & all of you for this.I’ll have to show this to my friends cz most of them still don’t knw this technique, they still use images for the rounded corners.Thnx once again!

Thanks for this, Jon!

Had some fun rounding things off on my little site – helped in great part by this very useful post.

Thank you so much for this detailed article on the topic. I was reading so many others on the web, but none of them could help me to achieve the round corners in IE, as it was the first time I try did, and they didn’t explain as deep as you do in your article.

Now I successfully have rounded corners on IE in my site.

Happy coding!

it is wonderful tutorial

I’m calling the .htc file with an absolute path in an IE hack sheet but it knocks out the div background colours. I think it’s down to inline inheritance, but display block, position relative and zoom don’t make a difference.

Same thing here. When I call .htc file with an absolute path, my background disappears in IE. I wonder if this is somehow connected with transparency I’m using in my background image… But when path to .htc file is relative nothing happens at all – just square corners in IE.

thx, great article

is there an online demo for testing?

I really liked this one. and in future i really like to visit this site again for thsese kind of tips

Jeebus H Crisco hasnt the browser world resolved this yet? I leave web development for a couple of years, expecting ridiculous issues like this to clear themselves up, and all I get for my wait is a whole lotta nuthin. At least IE6 is dead, right? RIGHT?

I like your website, but by far my favorite thing is your “pantsless” easter egg.

Thanks for the help. Seeya.

PS: Why cant I put single quotes in this comment space???

Thank you so much Jon. Keep it up the good work.

Hello IE8 doesnt like this hack ! The solution is using this attribute to Parents element : position: relative; z-index 0; Thanks for your blog… Serge

Very nice CSS trick! I will be using this in a lot more projects. I did run in to a weird IE bug though. I use a js function to fade border/font/bgcolor style of some newly rounded buttons and it becomes a ‘not round’ div again. Does anyone have a javascript or css fix for this issue?

This saved me SO much time! Thank you!!

This is great but I had a lot of trouble with IE8 often not rounding the corners even though the htc file was being loaded.

The Solution (this has now been confirmed on 3 sites amending existing css).

Add a dummy empty rounded corner div just after the Body tag:

/* Rounded corners – All browsers */ .rounded-corners { background-color: #ECE9D8; – match to your background width: 900px; – match to your width height: 0px; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; behavior: url(css/border-radius.htc); }

It seems that if the htc file is applied to an empty (clean) div, IE is then much more happy with applying the htc to subsequent divs and elements.

Thanks for this tutorial, however do you know how to do a table with strokes (rounded corner strokes) w/o using image? I prefer CSS, if someone know, please do reply, kindly thanks.

If am using drupal, how will the path to the htc file be used? I copied it to my site in a folder with path similar to:

/www/sites/mysite.com/themes/garland/

where the htc file is stored in the garland folder.

what path do i need to use in the css: behavior(path to htc) as u mentioned : “this path is relative to the page from which you call the CSS”, but drupal store its pages in a db instead of in folders…?

kool stuff Jon!

THIS ISSSSSSSSSSSS the best way I have found! Way to go! Thank you! (How can I add a shadow to the right border???)

Really nice stuff. It was just what I was looking for. I have one question. On one of my pages I have the rounded corners on the two side bars and the main content. Inside the main content I want to put a form. Any idea how I can turn the rule off for just the form? Thanks, Great work.

This is great discussions. I’m currently having problem with background-xxx (background-repeat, background-position, and etc…) properties when use in conjunction with border-radius.htc. The background image kept on repeating itself when I specified background-repeat:no-repeat.

I think Peter already asked this question but no reply yet.

Just what I needed, landed on the page to be greeted by the icons of the 5 browsers I use.

Websites like this keep me inspired to getting my freelance web development career off the ground 🙂

Works perfectly in IE7 but why can’t I get it working in IE8 if everyone else does?? Followed instructions exactly as far as I can see.

Awesome stuff, these site http://www.cssportal.com/css3-rounded-corner/ goes further and generates the css for you – for the lazy ones 🙂

This is great discussions. I’m currently having problem with background-xxx (background-repeat, background-position, and etc…) properties when use in conjunction with border-radius.htc. The background image kept on repeating itself when I specified background-repeat:no-repeat. Visit http://www.filesharepoint.com/ OR Fileshare

First off, great article. CurvyCorners seems to have broken sometime in the past few months (its own site degrades to square on my Windows test VM) and I weeded through so much outdated and just plain bad information looking for another solution.

I just wanted to point out another quirk I discovered for anyone else trying to make curvy elements without a border. border-radius.htc seems to give my curvy divs, which are supposed to have a border-width of 0px, a border-width of 1px, with border-color defaulting to whatever the color attribute is set to. I tried explicitly setting the border-width after I called border-radius.htc and this was not respected. So I explicitly set border-color to the same thing as background-color instead, and will live with divs being 1px larger in IE.

How about for the new browsers released?

THX a lot for the advice with the path to the border-radius.htc – I tried to use this this several times, but no one told me before, that the path is different to other CSS URLs lik images …

Greets from germany

Nice tutorial on round corners. I’m going to try that out! thanks

Thanks man – this saved my bacon!

perfect! just what i needed! I hope this works in my list navigation. 😀

Yay! just tried it and it works great! I didn’t try the IE hack though. Anyway, I don’t care if it works with IE or not. yay! Thanks Jon Raasch! 🙂

Whew.. Thanks mate.!! great post. One question tho, why do people still use IE.. Arrrg..

People still use IE simply because it is better than the best. 🙂

Thanks for this solution.. this saved lot of time for us…

Thanks Jon Raasch for sharing this , and a shout out thanks to Andy Piddock for the IE fix. Have a great new year everyone.

There is the world, and then there is Microsoft (25 square miles surrounded by reality). I suspect CSS3 will be fully supported in IE9, CSS3 support will be removed in IE10, and will be partially reinstated in IE11. That’s the way those thumb-sucking idiots like to do things. Ineptly. Incompetently. Arrogantly. Stupidly-while-they-slip-on-their-own-drool-and-fall-off-their-100-million-dollar-yachtly.

The problem is, of course, that we continue to jump through hoops to support the IE family of brain-dead children. If everyone could be persuaded to drop support for IE for just 1 year, that might be enough to drive a stake through its heart.

Now, is there a similar sharp stake we could use on that other class of clueless idiots, liberal politicians? But, I digress…

Thankyou!! I just let out an audible ‘Wahay!’ :]

Because the people use windows….

@Andy Piddock – Thank you thank you! I tried everything else, that is the only fix that worked for me!

Jon, please add that info to the article, it’s very helpful!

Andy Piddock said: This is great but I had a lot of trouble with IE8 often not rounding the corners even though the htc file was being loaded.

Add a dummy empty rounded corner div just after the Body tag: /* Rounded corners – All browsers */ .rounded-corners { background-color: #ECE9D8; – match to your background width: 900px; – match to your width height: 0px; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; behavior: url(css/border-radius.htc); }

This looks very cool. But will it work with a list in IE? I’d like to have a page with a rounded corner box and inside the rounded corner box would be rounded corner buttons. I can get the rounded corner box and the rounded corner buttons inside the box in Safari or Firefox, but IE only shows the rounded corner box and not the rounded buttons.

Thanks a lot… you save my time.

Seems this hack doesn’t work if the intended element to have a rounded corner is embedded inside another element that has a background color and/or image…

I’m having the same issue as Art. If the div with rounded corners is sitting in another div, it doesn’t work. I’ve tried all the other solutions, adding the other lines of code, etc. Oh well. Please die, all old IE versions, and bring on IE9.

Have to say thanks for this info because it worked a treat on my template, with very few problems. Rounded corners really can refresh an ageing design.

Jon Raasch ,I have a small request for you.

I loved your script.I implemented it on my joomla component.

It’s coming rounded for all browser but not in IE.

I am stuck whether the htc path is wrong or its getting overidden by joomla css files.

Wow, thanks dude for the CSS tutorial above, it worked.

I have a page and the Round Corners are not working in IE (I have IE8). The website is http://mochicaweb.com/arash/about_us.html . I first thought that it might not be working because of the Cufon Javascript. But that is not the reason.

Please feel free to take a look. Any help is very much appreciated thanks.

First,thanks a lot.This article helps me a lot.But I found a problem as it mentioned above:the div is embedded inside another div,when I set the background color of the parent div,the child div which have round corner will disappear!

And how can I deal with this problem?

GREAT Tutorial!!!! For the longest time, i had to cut corner images. Now…..no more images thanks to you!!

what do i use as the html code?

Hi. I find a problem with transparent backgroundColors and v:fill in IE8 (i dont have tested in anothers IEs yet). The background color is turnet do black if original is ‘transparent’.

I think that solved this : fill.color = (fillColor==’transparent’) ? ‘none’:fillColor; (line 93).

Thanks your code. Its awsome.

I prefer only the pure CSS version, IE users don’t deserve beautiful rounded corners. http://it-things.com/index.php/2011/03/pure-css-rounded-corners-no-images/

WOW you are great. Thank you so much.

FANTASTIC. You are so amazing. Thank you so much. I’ve spent over 10 hours trying to sort this out. I can’t epxress my thanks in words.

Same problem as Art above — using the behavior for IE causes the borders and background completely disappear the if containing element has a background color or image; so seems completely useless…

Example: See the example html file from the link you have above to download the htc file; just change the containing div to have a background color. All the boxes disappear.

You are lifesaver m8 thx so much!

Thanks man! This is really what i needed! Oh, I also like the design of your website.

This is a freaking unbelievable tutorial!!!

What Can I say!!!

AMAZING EXCELLENT BRILLIANT ROCK!!!!!!!!!!!!!!

I love it, but the only issue I am having with this is when you resize the browser window in Internet Explorer, the div stays static. :/

Great help, thanks!

Wouldn’t it be great if we could just stop supporting IE? It’s like the whole class has to slow down for the one kid that refuses to do his homework.

This is great. Thanks so much!

but what about when we need a white background 🙁

sorry yes its working, not an issue if applies background color border displaying 🙂

Good to know that IE 8 and below doesn’t support this rounded corner thing, saved me a bunch of time testing! Unfortunately, that means I’ll have to stick with non-rounded corners for some time. boo!!!

Hey.. nice tutorial.. but this border-radius.htc still not working for my IE 8.. I ran a demo http://code.google.com/p/curved-corner/ , that worked in my explorer , i could see round corners but when i run my own website in IE with .htc in it.. it doesnt work.. please help.. i really need that.. i dont want typical rectangles

I messed around with the .htc file for like 3 hours…needed a static link not a relative link. That’s what I was missing. Thanks man! Now got rounded corner in IE.

The code for rounded corner is not supported in IE…….

hey, thanks a lot! just added to my pages… i will run the test now, but you saved a lot of time already for me!!

Trying to get the border-radius.htc to load for IE8. Will not work with nestled DIV tags. Works fine in all other browsers. The code for classname is what everyone here has been trying to work…

.classname{ margin: auto; border:solid 2px #33FFFF; background:#EEEEEE; text-align:center; padding:5px 5px 5px 5px; -moz-border-radius: 25px; -webkit-border-radius: 25px; behavior: url(/border-radius.htc); border-radius: 25px; height: auto; width: 50%; }

If anyone can find a way to make IE behave with more than one DIV tage, please share. This is driving me nutts.

I’m glad you updated the post (towards the bottom) that IE finally got it right. I find having 4 different version of getting Rounded Corners via things like -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px;

To be a HACK. it may be supported, but it isn’t the definition of the CSS 3 specification. At least IE supports the native CSS format of border-radius. Too bad we had to wait for IE 9, but when you swap to HTML5 and the new Canvas Object, IE10 ROCKS.. better support and speed than anything else out there. (IE9 is still missing is a few areas. but they (MS) is making great steps into coming inline with the true standards as defined by wc3.

I have tried everything to display my blog round corners and shodow boxes when using IE 9, even so called “hacks”. In my opion, M$ should shame themselves not supporting standart css code!

THX a lot for the advice with the path to the border-radius.htc – I tried to use this this several times, but no one told me before, that the path is different to other CSS URLs lik images … Greets from germany

Thanks loads Jon nice fix works really well. Spent a lot of time yesterday trying to get IE to display just rounded top corners for a tab menu I am working on. Got it working in every other browser no problem but usual story no joy with IE. Does anyone know of a way to round just top corners of a div in IE?

Without resorting to images and JS. Cheers

Thanks so much, I have been using images for my rounder corners all along. Now this saves my day.

@Sara: “I ran a demo http://code.google.com/p/curved-corner/ , that worked in my explorer , i could see round corners but when i run my own website in IE with .htc in it.. it doesnt work”

your solution :- put this line of code “border-radius: 7px;” about the “.htc”

e.g. border-radius: 7px; behavior: url(border-radius.htc);

Exactly what I was looking for…now I need to figure out how to just round the “top” corners…is this possible?

Great, IE does suck….

the .htc for IE is tricky, the css should include the relative path from the page to the .htc file??

Thanks for the great tutorial it saved my life!

I noteced it will not work if u r using the following css code, this one is for making gradient background color

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#fdf1eb’, EndColorStr=’#eceada’);

when i removed it it start working

Thanks again 🙂

Solution: Chrome Frame for IE

Because IE seems like it will always be behind the times.

http://code.google.com/chrome/chromeframe/

I am trying to get this to work in a hover state, but it is not working no matter which way I try it. Is this possible with your script? Any advice would be great. Thank you.

I modified border-radius.htc to support changing background color of the buttons. The buttons’ class name must contain a string “ieHoverSupport” and your css file will use “.iehtcover” to define hover background color. This code is placed below the first public:attach tag.

And inside script tag, add these two methods: function oncontentover(classID) { // only execute when element class contains ‘ieHoverSupport’ if (this.className.indexOf(‘ieHoverSupport’) != -1) { this.element.orinalColor = new String(this.element.vml.firstChild.color); this.element.orinalClass = new String(this.className); this.element.removeAttribute(“style”); this.className = this.className + ‘ ‘ + classID; this.element.vml.firstChild.color = this.currentStyle.backgroundColor; this.style.background = ‘transparent’; } } function oncontentout() { // only execute when element class contains ‘ieHoverSupport’ if (this.className.indexOf(‘ieHoverSupport’) != -1 && this.element.orinalClass != this.className) { this.className = this.element.orinalClass; this.element.vml.firstChild.color = this.element.orinalColor; } }

Thank You Jon! You always help me out with your blog, ever since you talked me out of using tables the sky has opened up.

One thing I noticed, I could not get this to work in IE despite all the troubleshooting suggestion. This was solved when I used this htc file instead.

http://fetchak.com/ie-css3/ie-css3.htc

Thank you for all your Insight Jon and I will stay tuned in.

-Dominic G.

This article helps me adjust the TOP rounded corners, tnx buddy

Aaag! Tried this a few times, but the background colour flickers then stays off? Any idea guys? Views fine in ff as usual lol Here’s the link:

http://www.nationaldebtrelief.co.uk/debt-relief-blog/category/debt-advice/

Here’s the css: padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; behavior: url( http://www.nationaldebtrelief.co.uk/border-radius.htc ); border-radius: 5px; position: relative;

I have also tried adding block display and attaching zoom, but to no avail.

Excellent, Thanks!

http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

It had removed the background color on the header when i used this:

-moz-border-radius:0px 0px 12px 12px; -webkit-border-radius:0px 0px 25px 25px; behavior: url(border-radius.htc); (USING THE border-radius.htc file is not working) border-radius: 20px;

But when I used the other file; (ie-css3.htc) IT WORKED PERFECTLY!!

-moz-border-radius:0px 0px 12px 12px; -webkit-border-radius:0px 0px 25px 25px; behavior: url(ie-css3.htc); (IT WORKED! Rounded corners with the COLORS on it) border-radius: 20px;

Thank you very much for this article. Now I can continue with my project!

Great plugin, but I’ve a question:

Does it work only to apply rounded corners to ALL borders? I’m trying to apply it only to the left bottom border (-webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px; ) and it’s not working.

Wether the radius are applied to all corners or none of them. Is there a way to reach this result I’ve described?

Nice, ive been looking for this…thanks so much

God, Damn, INTERNET EXPLORER!

Thanks for the alternatives, very appreciated

I’m trying to use your hack, but i’m having a problem when its inside a div that has a background-image. Please let me know what i need to do.

thanks Alec

The CSS is easy!! Just that the browsers are not keep upping with the programs! Even with transparency, some of the browsers are not supporting it!

And some of the clients use old browsers and_ we should offer a link to download new browsers to our clients!

Hey I am very new to the web design thing. I have started learning CSS and have built a site for a client http://www.acumencapital.co.za . I have used the rounded corners in all browsers but my client still uses IE 8 and doesnt like IE 9 and is demanding the rounded corners on the site in IE 8.

I have copied your IE 9 code into the style sheet into the style identity for the corners to be rounded but it doesnt seem to work. could you help with why? thanks a lot alex

border radius htc not working in ie8 .. joomla1.5 puritty ii templates I had using htc file… but no use in ie8 anybody knows the solution …plz post here .rounded-corners img{ -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; } .rounded-corners img { behavior: url(/css/border-radius.htc); border-radius: 20px; }

can you please tell me “-moz-outline-radius” CSS3 code for Internet Explorer and Other Browsers. now works only with FireFox.

am trying to create a round cornered outline for a round cornered DIV.

Great! NIce dude..

This is not working for me. It doesn’t work all the time. I have other styles on the div I’m trying to make rounded corners on and when I apply this, it removes the background image.

background-repeat: repeat-y;

Will not work together with:

border-radius: 4px;

###> SOLUTION: http://css3pie.com/

Work both with repeat, background-image, border-radius (rounded corners) etc. GREAT fix/hack that really does the job 100% flawless!

doesnt work in ie8 🙁 and in ie7 it messes up its z-index and its background color, guess ill have to keep searching for a real solution

How do make rounded left and right corners on a tab in CSS.

Nice post. IE still gets me angry. However I still wonder why folks dont want to move beyond IE6? Its like refusing to leave the stone age in a dynamic world. Update your browsers guys…

This hack does *not* work in IE6, taking all the above into consideration.

thanks for the example……………….

Thanks a lot for this mate, exactly what I was after and works straight out of the box. Now my design looks slightly less bad 😉 Cheers!

Hi all I know I am a late comer to this thread, just wanted to point out that Opera 11.x seems to support round corners natively, at least on the Mac. I am wondering though as a designer who really would rather not have to actually make sites, but has to anyway, is there a way of incorporating IE versions into the general CSS style sheet instead of having to include one CSS for IE 6 and one for IE 7 just to make your designs look the way you want them to?

It’s so frustrating that MS insists on having a different protocol to all other browsers. I frankly don’t see the point of it. For me it is especially hard since as a Mac user, it means every time I design a site I have to find a PC with old versions of IE just to test my work before delivering to the client.

This solution sounds great, I shall test it as soon as I get a chance. Thanks.

Hi Guys ! I have added code for rounded corners to simple html file then added ie-css3.htc file in that file containing folder but works fine on FF and Google-Chrome but when it comes to IE6 It fails. Can anyone of u please tell what kind of changes you have done, other than just renaming the .htc file because after doing that also it is not woking for IE 6. One more thing i want to know is this file only working on server other than local machine’s because, i am not uploading anything. just tried for local machine’s following is my code :

.div { position:relative; -moz-border-radius:0px 0px 10px 10px; -webkit-border-radius:0px 0px 10px 10px; -khtml-border-radius:0px 0px 10px 10px; behavior:url(ie-css3.htc); border-radius:0px 0px 10px 10px; border:2px solid rgb(151,41,38); background:green; text-align:center; height:50%; width:50%; }

12345678910

All the suggestions are accepted, Thanks and regards in advance Your friend Swappy

Wow After searching so many css code finally got a working solution for curved border boxes.

Thanks bro you are amazing!!

If you are having trouble with combining the border-radius and the gradient filter, try this solution, worked for me. https://github.com/bfintal/jQuery.IE9Gradius.js

No matter which HTC file I try, it still doesn’t work!! (ie-css or border-radius.htc) I’m runnint IE7 behind an education firewall…haven’t had a chance to test it on a different network.

I’m about to use nifty corners or something similar as this hack just aint workin…. I’m trying to combine it with the Jquery for CSS dock menu ( http://ndesign-studio.com/blog/css-dock-menu#comment-227470 ) and just being difficult as usual. If anyone has got this trick sorted before, would love to hear….

Is it possible to integrate htc file to a image tag???

Simply brilliant. Many thanks for posting this.

wooahhhh… this is what i’ve been looking for 1239403853857190351 years… thank you very much for this article…

While using the above method,I am facing lot of z-index issues in IE 7 and IE 8.Please help me

What if you only want that the top right of your div is round in IE8? This code doesn’t work: .rounded-corners { behavior: url(/css/border-radius.htc); border-top-right-radius: 20px; }

Thank you SO much for this article, you have no idea how hard I’ve tried to make this work. This is great!

I tried to use in my one of project but its not working…

Make any changes(even add space in html file) and save it…

Ant then check, It’ll not work in IE7 and IE8.

Other browser already support radius property.

I am going on wrong way, or any other reason.. I don’t know..

Please, give me solution..

Waiting for reply..

SCUMBAG INTERNET EXPLORER

-moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px;

not work on ie8

thanks for helpful article, i have fixed IE issue for my website 🙂

Hi. Your guide is good. I made it work but when I try it to images it didnt work. What seems to be the problem? How can I make it work?

how about just two rounded corners? it didn’t work for me in IE <= 8

thank you very mach, saved me time.

Thanks, Your Blog design is Wonderful !!!

Ok, this is very cool… but any idea on how to make it work on TABLE and FIELDSET without touching the actual page?

Thank you so much… Stefano

Thank you for this useful tutorial, I try it my side but without success, may be I will give up for IE7 and even IE8, users have just to follow technology and updates their browsers 🙂

Thanks guys Quran

Dear … I use ur script (.htc) file , but it is working ok on google chrome and mozila but not working in IE 9. Please suggest me … for example ..you can run http://www.includehelp.com on different browsers … home page contains ur .htc file Regards, SUDHIR SHARMA waiting … for ur reply ??

Thank you, round corners made my design that much hotter! Thank you so much.

This was a really great article. Some of us old timers are slow to change. It is more comfortable using the old photoshop cut with the exact look we want. With today’s exploding mobile media using the native CSS to do element effects is so much nicer though as it does not cause the overhead and most of the time the same desktop design scales fine down to the mobile media market as well, saving a lot of time and money to be sure!

2 Trackbacks/Pingbacks to “CSS Rounded Corners In All Browsers (With No Images)”

• Rounded corners hack – what am doing wrong here?
• Smhylmz | Ki?isel Web Günlü?üm » Css:Tüm Browserlar için Border Radius ve Opacity Özelli?i

Comments are closed.

Read My Books:

I've written four web development books, covering topics such as:

• • Advanced JavaScript Techniques
• • Mobile Web Development
• • JavaScript Charting Libraries
• • And more!

Find out more

Favorite Posts

• 5 Asset Management Tricks for Faster Websites
• 10 Javascript Performance Boosting Tips from Nicholas Zakas
• jQuery Contra Plugin – Up, up, down, down, left, right, left, right, B, A, enter
• 10 Advanced jQuery Performance Tuning Tips from Paul Irish
• 10 Things Every Good Web Developer Should Know (A Checklist)
• QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler
• Scrolling Parallax: A jQuery Plugin
• A List Apart
• David Walsh's Blog
• Design Mills
• Interactive Volcano
• John Resig’s Blog
• Learning jQuery
• Paul Irish's Blog

Overflow hidden + round corners not working on Safari

Apparently, it’s a bug on safari. Any workaround/code to fix this?

http://stefanias-first-project-e6faf1.webflow.io/issue-2

Here is my site Read-Only: LINK ( how to share your site Read-Only link )

Hi Stefania,

round corners don’t need overflow hidden most of the time (they don’t need it for bg images for example)

your link plays well in my Safari, look:

http://vincent.polenordstudio.fr/snap/issue_2_2018-09-21_15-01-03.png

Hey @stefania4

In Safari, everything also looks find for me until I hover over the element.

Are you able to share a read-only link?

Hi, @stefania4 !

This Safari bug is well known (don’t know why they didn’t fix it). Workaround you can find here: Safari not hiding overflow on rounded corner divs

thanks @sabanna , Now it’s working.

I used this as reference:

The issue is the combination of overflow , border-radius , and transition

This is the solution: On the element with overflow:

.transitionfix() { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0) }

added minus z-index value for image and higher value for the parent

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

Border-radius not working in safari

My understanding is that it is no longer necessary to use media queries for displaying border-radius.

However, after a hair-pulling day, I am not sure whether this is correct or not.

I need to display my border like this,

Works in Chrome

and not like this - as seen in Safari 5.1.7

I have tried a wide variety of css as exampled below, but none display correctly in Safari.

img.imgbox { border: solid #adadae 2px !important; -webkit-border-radius: 45px; -moz-border-radius: 45px; border-radius: 45px; }

img.imgbox { border: solid #adadae 2px !important; -webkit-border-top-left-radius: 45px; -webkit-border-top-right-radius: 45px; -webkit-border-bottom-right-radius: 45px; -webkit-border-bottom-left-radius: 45px; border-radius: 45px; }

I have also tried changing the order of the values but it has made no difference.

If anyone has any advice to offer, it would be greatly appreciated.

It never was necessary. Did you mean vendor prefixes?

Safari 5 is pretty old now, and I doubt it’s widely used any more. Anyhow, Safari has not needed vendor prefixes since version 5. I don’t remember, but perhaps version 5 was a bit buggy?

My apologies - yes, vendor prefixes. Too tired when typing.

Possibly, the Safari 5 version was buggy, although most of the documentation says that should display using border-radius.

Friends I contacted today, using the latest Safari version, tell me the rounded corners are missing.

The site is located at http://dev.purnelljewellery.co.uk/

Hi, JamesICT. I have a shot-in-the-dark suggestion… (I don’t have a Mac).

Your custom stylesheet should be the last stylesheet in the lineup, not the first (or anywhere near it). My clue was the number of !important modifiers in it. They shouldn’t be necessary. If the custom stylesheet were last, they wouldn’t be. It would do its thing in the cascade and override previous styles of equal or less specificity. So the suggestion is to relocate your custom stylesheet, remove the !important modifiers, and see what happens. You may indeed need one or two of the modifiers, but not most. And with luck, you might fix the border-radius issue.

I’ve got Safari version 7.0.3 (which I think is the latest) and the rounded corners are perfect there.

Is Safari Apples’ way of trying to one-up Microsoft for releasing the most O/S specific browsers with its systems, or was Safari 5 a lemon, or is it significantly outdated? :p[/ot]

was Safari 5 a lemon

I don’t think so. I think it was a browser. :p[/ot]

…one that should have been elemonated before it was released. :x [/ot]

• | New Account
• | Log In Remember [x]
• | Forgot Password Login: [x]
• Format For Printing
•  -  XML
•  -  Clone This Bug
•  -  Top of page

Instantly share code, notes, and snippets.

domske / safari-fix-overflow-border-radius.md

• Download ZIP
• Star 25 You must be signed in to star a gist
• Fork 2 You must be signed in to fork a gist
• Embed Embed this gist in your website.
• Share Copy sharable link for this gist.
• Clone via HTTPS Clone using the web URL.
• Learn more about clone URLs
• Save domske/b66047671c780a238b51c51ffde8d3a0 to your computer and use it in GitHub Desktop.

There is a bug in Safari when using border-radius and overflow: hidden . Especially when applying transform to a child. In this case, overflow: hidden does not always work. The child ignores the border radius and overflows. It's a very old bug. And sadly it seems that it will never be fixed. Anyway, we can't wait for it.

There are some workaround. We need to place the element with the overflow attribute into a stacking context. I've tested the following workarounds on the latest version of iOS (14.4). You can choose what you want. But you should search the web for the particular attribute. (e.g. will-change should be rarely used. See docs )

Use this on the element with overflow: hidden and border-radius :

Let me know if this fixed your problem or not. Personally, I use transform or z-index . These are probably the most harmless properties. But feel free to post your opinion and other great solutions.

tklkalok commented Jul 14, 2022

Nice and Detail workaround, appreciate your effort and hope Apple would some how fix it in the future.

Sorry, something went wrong.

hirenpanchal1608 commented Jul 26, 2022

Nice solution! transform: translateZ(0); works for me

JoiGud commented Nov 29, 2022

Nice workaround. The translateZ worked for me!

mosuzi commented Dec 5, 2022

Unfortunately, neither those above worked for me :(

fdambrosio commented Dec 6, 2022

good, it works to fix on ios 16 !

jowc commented Jan 22, 2023

Thanks. The z-index worked for me. :)

cesswhite commented Feb 11, 2023

Thank you, two solutions work for me in CSS: 1.- mask-image: radial-gradient(white, black); 2.- will-change: transform;

In UnoCSS/TailwindCSS this class work for me: will-change-transform

alexhartan commented Feb 21, 2023

You are the man! This fix just solved a bunch of headaches for me

SebHex commented Apr 2, 2023

Using the Tailwind CSS class transform-gpu worked for me

This is similar to using the following CSS:

dsajlovic commented Apr 11, 2023

April 2023 still with the same problem, ONLY in Safari -.- Thank you for posting workaround :)

minhoyooDEV commented Apr 12, 2023

Frederick-88 commented Apr 13, 2023

transform: translateZ(0); works for me in 2023 - thanks a lot!

btlm commented Apr 20, 2023

z-index: 0; works as charm

kaiwen-wang commented May 15, 2023 • edited

confirming tailwind will-change-transform works

VolodymyrShtef commented May 15, 2023

Thanks, z-index did the job

alexfranco90 commented Jun 1, 2023

Thanks, both z-index: 0; and transform: translateZ(0); works for me. In my case will-change: transform works too but i was trying to find an alternative.

MartinMalinda commented Sep 3, 2023

hieuthien commented Sep 5, 2023

Thanks you, all thing works with my CSS =]]

wojciak commented Nov 20, 2023

NeroTesalo commented Mar 13, 2024

I love you for this! Solution 2: transform: translateZ(0) save my life free from this awful bug

sohammondal commented Apr 27, 2024

Awesome!! transform: translateZ(0); works for me. ❤️

• Full Screen Result
• Embed on your webpage (blogs, articles, etc.)

Safari 7 border radius/transform bug

Coding Preferences

Your default settings - preferences, validations.

(Errors from your JS or Pre-Processors code)