Rounded Corners For Web Site

by Andyf
3 replies
Does anyone know the best way to make rounded corners for CSS DIV boxes?

I've seen a number of ways to do this....some are real long and a little complicated. Some are actually pretty easy to use. But so far, I haven't found one that works real well.

I have downloaded a few Javascript apps and they almost worked fine, but each one so far had a little "quirk" or two that made the corners not look so great. There has got to be one that works good that people are using.

Maybe there is a software package out there for website graphics that also contains solutions for rounded corners....I don't know.

Any thoughts?

I posted this question on a different Warrior forum and got one response...but I don't think that forum gets the traffic that this one does.


#corners #rounded #site #web
  • Profile picture of the author Don Schenk
    The times I've been curious as to how someone created an optin form in a box with rounded corners or created a box with rounded corners to hold testimonials, when I looked at their source code each had been created by using a graphic with rounded corners saved as a jpeg or gif or png.

    Soooo, I just did it that way by creating a graphic element with rounded corners and either make it an apdiv or drop it into a cell.

    This works, it's simple, but there has to be other ways.

    {{ DiscussionBoard.errors[973922].message }}
  • Profile picture of the author Zemalf
    Yep, the easiest way is to create image with rounded corners and put it as background (in CSS) for whatever you want in it. For static sized objects, this is the best way - for example opt-in forms..

    For variable size parts, one way to do is to create "top" and "bottom" images for the box - with the horizontal line, the rounded corners and couple of pixels for the vertical left/right edges - and add them as background for DIVs with IDs like "box-top" and "box-bottom". Then add these div's over and below of the main part (which you add repeating 1px background which creates the vertical left and right edges).

    And there's some ways in the CSS without using any images, but the problem with "non-image" ways is that the final result might look odd in different browsers, but there is "border-radius:" option in CSS 3 (not a solution for now) and non-IE browsers (not sure for IE8) have the functionality, e.g. Firefox supports "-moz-border-radius:" in the CSS:

    .rounded {
    -moz-border-radius: 2em;
    border-radius: 2em;
    {{ DiscussionBoard.errors[973943].message }}
  • {{ DiscussionBoard.errors[973974].message }}

Trending Topics