Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts

    Question DIVs with rounded corners

    Hi,

    I would like to use DIVs (or whatever) with rounded corners to enclose the various elements of my web pages.

    I have written a noddy bit of PHP which auto-generates a PNG image and allows you to specifiy the width, height, border thickness, corner radius, background colour, border colour, etc, etc of the image with transparent bits outside the corners. This image can then be set as a DIV background.

    This is OK, but is there a pure CSS way of doing this? It would be nice to do it as pure CSS because, although my method works, it involves a couple of hacks and it's "icky".

    TIA,
    Mike.

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    AKAIK, rounded corners are not supported by css2 but maybe they will be in css3?

    Someone on here, much cleverer than me, posted a solution some time ago, which comprised a top gif which was a rectangle with its top corners rounded and another, for the bottom with its bottom corners rounded. Then in the css, these were assigned as background colors for parts of the style. I dont have the link handy otherwise I'd post it ;p sorry.

    no guesses for why I remember the post. Back then, I wanted rounded corners too and they were decribed as s-o-o-o, last tuesday
    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #3
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts
    Sounds similar to my solution using a PNG image!

    So corners are just sooo last tuesday, eh? Like they're just so totally last season ... oh ya, like, y'know, kinda, like, whatever!

  • #4
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts
    In the words of Baldrick, "I have a cunning plan ..."

    (If you're not English and you never saw Blackadder, you won't understand that one!).

  • #5
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'd check out Nifty Corners: Rounded corners with CSS and JavaScript. It doesn't use images, and it's just a behavioral and style layer, so it downgrades and lifts right off your (X)HTML should your user's browsers not support it.

  • #6
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts
    Nice.

    Ta.



  •  

    Posting Permissions

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