Results 1 to 7 of 7

Thread: Rounded Fieldsets?

  1. #1
    Join Date
    Dec 2007
    Posts
    123
    Thanks
    17
    Thanked 1 Time in 1 Post

    Question Rounded Fieldsets?

    Hey,

    Just wondering how do u create such rounded corner fieldsets?


    http://img201.imageshack.us/img201/461/roundedpu1.jpg



    Thanx

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,480
    Thanks
    79
    Thanked 3,446 Times in 3,407 Posts
    Blog Entries
    12

    Default

    You don't, at least not with HTML alone (the forum you've posted in). Except that some browsers will simply render them that way. It's some IE versions, possibly some other browsers. Other than that, you would have to resort to either javascript, or involved css style, or possibly a combination of style and javascript. However, I've never seen that done with fieldset. But that's not too important because you could make the effect using other elements or adapt it to fieldset.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    As John noted, IE does this by default. In Firefox and Webkit browsers, you can use their respective rounded corner CSS properties (in place of the CSS3 border-radius property):

    Firefox: -mos-border-radius
    Webkit: -webkit-border-radius

    More information here.

    That leaves Opera, which does not yet support any of these.

    You can also view this discussion for all the different css-based ways to get rounded corners.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,480
    Thanks
    79
    Thanked 3,446 Times in 3,407 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Medyman View Post
    As John noted, IE does this by default. In Firefox and Webkit browsers, you can use their respective rounded corner CSS properties (in place of the CSS3 border-radius property):

    Firefox: -mos-border-radius
    Webkit: -webkit-border-radius
    I just tested this and it appears that -mos-border-radius works just fine for fieldset:

    Code:
    fieldset {
    width:34em;
    font:95% sans-serif;
    -moz-border-radius: 10px;
    }
    However, -webkit-border-radius does not. It must be applied to elements with border, but even with a border it still doesn't work for fieldset. It does work fine for division, probably some other block level elements.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default fieldset corner radius

    Hi

    As you said for firefox the moz radius is working. But for me in IE6 and IE7 , the rounded corners are not coming. Any solutions?

    Regards
    Nirupamavinoth

  6. #6
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    However, -webkit-border-radius does not. It must be applied to elements with border, but even with a border it still doesn't work for fieldset. It does work fine for division, probably some other block level elements.
    Ahh, good catch. Didn't actually test it when I recommend it. Thanks for the info, John.

    But for me in IE6 and IE7 , the rounded corners are not coming
    There really isn't a CSS solution for IE. If your Windows is set to "classic" style, you won't get the rounded corners. Otherwise, it's the default appearance.

  7. #7
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    I came across an article today entitled An Experiment in Rounded Corners on Jonathan Snook's blog. It's of some relevance here. Perhaps, some would like to read it.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •