Border Radius and IE8

HTML & CSS
1

So I was doing some research on Round Borders and Internet Explorer 8 and apparently you can achieve it using an .htc file. I was wondering what an HTC file type is and how I can use it to achieve round borders in IE8?

http://stackoverflow.com/questions/4326363/using-css3pie-htc-for-border-radius-in-ie8

2

A HTC file is something Microsoft has for its browser:
[

For Microsoft Internet Explorer 5 and later, HTML Components (HTCs) provide a mechanism to implement components in script as Dynamic HTML (DHTML) behaviors. An HTC is an HTML file that contains script and a set of HTC-specific elements that define the component. The component is saved with an .htc extension. This section lists these HTC-specific elements and the members they support.
](http://msdn.microsoft.com/en-us/library/ms531018(v=vs.85).aspx)

[

An HTC is typically an HTML file (with JScript / VBScript) and a set of elements that define the component. This helps to organize behavior encapsulated script modules that can be attached to parts of a Webpage DOM.
](http://en.wikipedia.org/wiki/HTML_Components)

So, for as far as your question is regarded, pie.htc is a Javascript way to achieve CSS presentation.

There are two things you need to be aware of:

  • using Javascript for presentation like this is something that breaks the principle of separation in web development: HTML for content, CSS for presentation, Javascript for behaviour.

  • if users choose to block scripts, you are still left w/o rounded corners for IE.

3

CSS3PIE is not a traditional javascript solution.

To reference it inside of your CSS (such as to give something a rounded corner), then inside of the proper selector, you add

behavior: ("path/to/PIE.htc");

So you still maintain the break between semantics/style/behavior. Although I’m unsure if it will still be visible if js is turned off.

The other issue is that using it will slow down your page in IE, so use it sparingly.

4

Using a png HTC fix isn’t a problem, so as long as this CSS3pie HTC fix works as advertised, I don’t see an issue with using it. I’ve seen several other border-radius HTC fixes, but none of them actually worked reliably.

So, if it’s solid, the only downsides are the performance hit with overuse and its dependency on javascript.

5

I’ve been thoroughly impressed with CSS3PIE.

Those are the only two downsides I’ve seen so far.

6

I just did some testing. For most static elements, it appears to work fine. The moment you start applying it to interactive elements…things go completely awry.

jQuery effects…forget it. Depending on what you have, fadeIn(), fadeOut(), show(), and hide() either don’t work very well, cease to work entirely, or elements jitter and jump around on the screen in various locations.

Form elements need an extra click to activate, especially buttons.

With fieldsets, the standard IE fixes for margins & padding and legends disappear.

So, while it looked promising, this basically has the same drawbacks as with other HTC border-radius solutions for IE. Oh well.

But–if you just need it for static divs and spans, it seems to work great, and the performance is much better than some of the other HTC solutions I’ve seen.

7

is it a better/faster solution than using images to render the feel of “rounded borders” ?

8

better? yes
faster? yes

not completely x-browser compatible? also yes.

images are a PITA, usually require a lot of extra non-semantic markup, tons of extra photoshop time, and aren’t modifiable or dynamic.

9

:smiley: Sounds like what I need then! I hate working with images to achieve rounded corners. So this seems like a good alternative!

thanks