ddhr.org - Rounded fieldset in Firefox

Date: 2006 | 01 | 24

Jan 24, 2006

Internet Explorer and Firefox interpret <fieldset> differently. IE makes rounded corners; Firefox makes square ones. I just randomly found out how to make Firefox display rounded corners: Put -moz-border-radius: 7pt; in the style sheet (with the leading dash). I didn't implement this on my site, but I verified that it works. (via coldforged) #technology

Comments

Michele

Feb 6, 2006

Very helpful. It worked in a site I did.

Now...is there a way to make the legend appear through the fieldset border as it does in IE?

Dave

Feb 7, 2006

I emailed Michele and she said, "I took a closer look at my code and realised it was because I put the content of my legend in paragraph tags - for text formatting reasons." So never mind, my thing still works.

Emilio

Jan 3, 2007

Does not do it in my test page. I have a fieldset as a direct child of the body tag, i.e. it is not wrapped by div or p or anything. Within the fieldset I defined a form and a table.

even with the -moz thing in the fieldset CSS thing does nothing to change the appearance. Planned to use it on my website http://www.FocusOnPanama.com/ but no luck yet

Dave

Jan 4, 2007

This should work perfectly:

<fieldset style="-moz-border-radius: 7pt;">
content
</fieldset>

It should render correctly below:

content

Micio

May 3, 2007

Yup in FF it works great! but then again... squares in IE7 (didnt test below)
And soo the story starts at the beginning... How do I get rounded fieltset in IE and FF :D

Thanks for the post!

Dave

May 3, 2007

IE has rounded corners by default.

Guest

Nov 27, 2008

What a rubbish response. Did you even read the question? Everyone knows what how to get rouded corners in IE, and how to get them in FF - the big question is hot to get them working for both browsers simulteniusly..

Dave

Nov 27, 2008

I don't know how I could possibly answer the question better. I showed how to do it in FF, and IE does it by default. Therefore, it works in both browsers simultaneously. The end. Maybe I'm misunderstanding you.

Demo

May 10, 2009

But it seems not working in Google Chrome...

#10

BlackMagic

May 28, 2009

I'm using IE7 and it doesn't have fieldset rounded corners by default. -moz works on Prism 1.0 and FF 3.0 but not on Chrome.

Does anyone have a solution for IE7 or Chrome?

#11

BlackMagic

May 28, 2009

IE7 has fieldset rounded corners, but not if you specify a background color or a background border width. This works:
fieldset {
border-style: groove;
border-collapse: separate; }

But this gives square corners:
fieldset {
background-color: #6495ED;
border-style: groove;
border-collapse: separate;
border-width: 0.2em; }

Since I want a rounded corners, a background color and a border width I'm still looking for a solution for IE7. Any bright ideas anyone?

#12

BlackMagic

May 28, 2009

The solution for Chrome is:
-khtml-border-radius: 7pt;

I'm still looking for an IE7 solution.