Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
From the author of

5. Rounded Corners

Because of limitations of HTML and CSS, most Web designs are rather rectangular in nature. There is simply no easy way to create rounded rectangles. The only consistent way to get rounded corners is by using graphics. The good news is that CSS makes it relatively easy to incorporate not only round-edged graphics into your design but other effects as well.

To do this, you’ll first need to create a large graphic with the design you want to use and then use CSS to piece it together in the HTML.

Create a graphic template version of your module with the rounded edges.

Carve the template into pieces for the top left, top-right corner, middle left, middle right, bottom left, and bottom-right corner.

Using CSS, you can put the pieces together to contain any content you want (including text), and the background will expand and contract around it.

EXAMPLE:

http://www.webbedenvironments.com/dhtml_css_advanced/code/05_Layout/CurvedBorders/index.html

  • + Share This
  • 🔖 Save To Your Account