ddhr.org
Rounded fieldset in Firefox (12) Tuesday, Jan 24, 2006 6:47 pm

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)

Michele Monday, Feb 6, 2006 9:15 am

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 Tuesday, Feb 7, 2006 9:57 am

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 Wednesday, Jan 3, 2007 6:28 pm

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 Thursday, Jan 4, 2007 12:37 pm

This should work perfectly: 

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

It should render correctly below:

content
Micio Thursday, May 3, 2007 5:11 am

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 Thursday, May 3, 2007 8:09 am

IE has rounded corners by default.

Guest Thursday, Nov 27, 2008 6:19 am

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 Thursday, Nov 27, 2008 9:07 am

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 Sunday, May 10, 2009 10:16 pm

But it seems not working in Google Chrome...

BlackMagic Thursday, May 28, 2009 9:28 pm

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?

BlackMagic Thursday, May 28, 2009 9:43 pm

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?

BlackMagic Thursday, May 28, 2009 10:34 pm

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

I'm still looking for an IE7 solution.

About (more)
Hi, my name is Dave Hosier, and this website is where I write my unfounded opinions on trivial matters. Feel free to look around, but please refrain from reading anything.

contact | code | pictures | feed

Discussion (feed)
wendy2 on Favre watch: Not to mention he can't...
Dave on Jazz appreciation: Good call, Bob-O.
Bob on Jazz appreciation: Yo Dave, there is a...
Rus on Internet echo chamber: The latter also subjects the...
Dave on Internet echo chamber: I read your comments, so...
Rus on Internet echo chamber: If he wasn't feeling so...
Rus on Where grass grows: Isn't there one house up...
Wendy on Where grass grows: Ehem...I suggested a garden in...
Rus on Favre watch: That last line is brilliant.
Dave on Where grass grows: Good point.  It wouldn't take...