ddhr.org - Rounded fieldset in Firefox

ddhr.org

Rounded fieldset in Firefox (12)	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

#1	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?

#2	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.

#3	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

#4	Dave	Jan 4, 2007
	This should work perfectly: `<fieldset style="-moz-border-radius: 7pt;"> content </fieldset>` It should render correctly below: content

#5	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!

#6	Dave	May 3, 2007
	IE has rounded corners by default.

#7	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..

#8	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.

#9	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.