rounded corners

Hi all,
How can I do "rounded corners"?

 

you can learn make rounded corner from Nifty Corners or use online rounded corner program at Spiffy Corners

 

usually all the rounded corners is an image, so just open up adobe photoshop or what every image editing software you use and use the rounded rectangle tool

 

if you want code-driven rounded corners, some can be done in CSS, althouh I don't think they're cross-browser totally.

CSS3 when it comes out, has a rounded corner tag AFAIK.

If you want it to work no questions asked, you can achieve this with a couple lines of simple javascript code. Any JS framework like jQuery or Mootools would undoubtedly have a plugin that does this in less than that.

plugins.jquery.com/search/node/rounded+corners

 

I've used at least one of the CSS-only (no images) rounded corners, and it's very cross-browser friendly. However, this was a small "round" and it could not have faded colours or gradients in them. The amount of code to make a very wide-angle corner would probably be more than I would use.

If images are used, then Sliding doors should be kept in mind with them, since whatever text (usually it's text) inside the thing with the rounded corners may grow wider.

There are quite a few rounded-corners JS solutions-- however anyone using them has to be okay with the rounded corners not showing up for folks like me. I don't allow scripts to run on random sites. People surfing via public computers such as libraries, schools, and corporate offices may have the Javascript blocked (unintentionally) by the network firewall, while not triggering any noscript functions.

For the OP, Teh Googles are your friend here... you will I'm sure find hundreds of pages about the various types and ways. : )

 

Some sites:
roundedcornr.com
curvycorners.net
spiffycorners.com
...

 

You can also do it using JQuery though its resource intensive. So the best thing is to us images as said above.

 

no need for javascript! resouce intensive .. won't work for some..

just CSS it .. here's a common way

Make 4 CSS classes or id's:
one with a background image of the top-right corner with the corresponding image
one with a background image of the top-left corner with the corresponding image
and so on...

Next multilayer your <div> tags to look somewhat like this

<div class="topLeft">
   <div class="topRight">
      <div class="bottomLeft">
         <div class="bottomRight">

            <div class="yourDiv">
            </div>

         </div>
      </div>
   </div>
</div>

Code (markup):

This will all be unnecissary when CSS3 comes out but 'til then we have to go out of our way and do this =P

Hope it helps

 

Close, but the trick is to use inline boxes to hold the backgrounds, like a span, a b, or tds...

Here's one of the CSS-only ones (of the gazillion out there): http://battletech.hopto.org/html_tutorials/rounded_css_borders/