I've found a way to get rounded corners with IE

[CK]

Okay so I've got it working with another site that I've set up, I was asking on help on how to get it looking like my forum (rounded corners). When someone suggested I upload this FILE and put the following code

behavior:url(border-radius.htc);

in the style sheet elements that I want rounded corners on.

So basically upload file to root and add the code, guess what? It actually worked. Here's where you can see it working http://tsps.us

So it was simple enough to get it working on the site because all I did was modify the index file, what I'm scratching my head over is how I would get it to work on vBulletin, where should I insert the code?

[kh99]

Maybe you could put it in Additional CSS in the style editor, something like:

#bsb { behavior:url(border-radius.htc); }

I noticed that in FF and Chrome you already have rounded corners.

[CK]

Originally Posted by kh99

Maybe you could put it in Additional CSS in the style editor, something like:

#bsb { behavior:url(border-radius.htc); }

I noticed that in FF and Chrome you already have rounded corners.

Yeah that's right, forum works great on webkit, Chrome and Firefox. Opera and IE just do not do the round corners and it's bugging the life out of me.

Can you explain that code a little better.

Should I do the entire "#bsb { behaviour:url(border-radius.htc); }" with the spaces and the "#bsb" at the start?

[kh99]

Originally Posted by ChemicalKicks

Should I do the entire "#bsb { behaviour:url(border-radius.htc); }" with the spaces and the "#bsb" at the start?

Yeah, I think so. I'm not a CSS expert and I haven't tried it so I'm not sure if it's exactly right, but your div has id="bsb" so that's saying to apply that bit of CSS to the thing with that id.

[CK]

Here's what I put, unfortunately it made no difference.

#bsb {
background-color: #686968;
behavior:url(border-radius.htc); 
border-radius: 5px;
-moz-border-radius-top{vb:stylevar left}:20px;
-moz-border-radius-top{vb:stylevar right}:20px;
-webkit-border-top-{vb:stylevar left}-radius:20px;
-webkit-border-top-{vb:stylevar right}-radius:20px;
-khtml-border-top-{vb:stylevar left}-radius:20px;
-khtml-border-top-{vb:stylevar right}-radius:20px;
border:10px solid #686968;
_border: none;
}

[kh99]

Oh, you already had a #bsb section, then yeah of course you didn't need another #bsb or the curly braces.

It's working in your dark style (although I didn't check that before you added that stuff).

[CK]

Originally Posted by kh99

Oh, you already had a #bsb section, then yeah of course you didn't need another #bsb or the curly braces.

It's working in your dark style (although I didn't check that before you added that stuff).

The rounded corner are working in IE on the dark style? For me it's showing no change, could you do me a massive favour and take a screen shot for me?

The dark style is the one I'm trying this on as it's less used, well spotted

[kh99]

Maybe try Shift-reloading the page (Edit: um...I guess it's actually Ctrl-F5 in IE).

Screen shot only shows UL but the other corners are rounded too, just couldn't deal with the image size using paint

[CK]

Thank you

That's so strange it doesn't seem to be working for me (Using IE9 BTW).

It's getting late for me now though so I think I'm going to bed and will pick this up again in the morning. Thanks for your help.

EDIT: Applied the changed to "Original".

[kh99]

Originally Posted by ChemicalKicks

That's so strange it doesn't seem to be working for me (Using IE9 BTW).

That could be it I guess - I'm using IE8. But maybe it's just that your CSS file is cached.