rounded corners

i want to display some text in the center of my page with rounded corners..
can anyone help me to get there??

 

I'll love the day rounded corners can be achieved mathematically (isn't there a way to do this with xml???).

In the meantime, there are a few choices. There is a rounded-corner element for Mozilla (gecko) browsers. Of course, they will not show up in IE browsers, Opera or Safari. These elements are being considered for CSS3. It's called -moz-border-radius.

There are some rounded-corner CSS tricks, like at http://www.cssplay.co.uk/boxes/ -- using background images, so lining everything up in every browser can be a pain, as well as colour matching.

The easiest thing though is to have an image already, either a top or side, and set as background image. I found a credit-card login site (not sure if it's mine, and couldn't find the names I was looking for, so maybe it's fake-- www.fiacardservices.com) where after hitting "register now" a nice rounded image comes up. It's a box with text, and on top is an image of a bar with each end rounded-- since the box's background colour is also silvery-grey, it looks like a box with rounded tops.

Unfortunately the site uses tables, which are unecessary. To get that same effect, set a background colour of silvery-grey, and a background image (theirs was "chromeRounded.jpg" which is 745px wide) set at top-center. *Edit, here is the image: https://www.ibsnetaccess.com/images/america/cards/chromeRounded.jpg
Example:

<div id="roundbox">
  <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
  <p>More blah blah blah blah blah blah blah blah blah blah...</p>
</div>

CSS:

#roundbox {
  width: 745px;
  background: #cecece url(wherever/chromerounded.jpg) no-repeat top;
}

Code (markup):

Background colour is cecece which is a grey. Background image (which is only a top border) is set to no repeat and top... I don't need to say top center because if I don't specify center then it's the default.

One problem with images is when your boxes are set to a percentage. The div boxes can grow or shrink depending on screen resolution, but the images can't. Using images only in the corners can help.

There are other ways too but these came to mind first.

 

www .curvycorners.net/
www .html.it/articoli/nifty/index.html
www .kalsey.com/2003/07/rounded_corners_in_css/
www .spiffycorners.com/

Choose your spice...

 

Just keep in mind what kinds of visitors you have, if you choose the javascript options, to be sure they have js on.