How to create boxes with rounded corners using CSS? (CSS, Tables, HTML, information technology, internet, Internet Technology, programming, Websites, web development, Web Design)

Help Questions | Solutions | Experts

Question Details

Question

Time: 05:16 - Jul 19, 2007 Asked by: dustPuppy Status: Answered Points: 75

How to create boxes with rounded corners using CSS?

I have tried to accomplish creating a box with rounded corners only using CSS, but finally had to resort to tables. There must be a way though, so could you explain how to do it, if it is possible at all?

Ask a New Question Become a Quomon Expert

Current Categories

CSS

Internet Technology

Tables

programming

HTML

Websites

information technology

web development

internet

Web Design

Question & Answer System for Websites and Corporate Intranets

Save your corporation money by having common business problems solved once

Drive a significant amount of new traffic to your website, products, and services

I found out that it is possible and there seems to be several different ways of doing it.
This one requires only one (BIG) image, and I don't really like it: http://modxcms.com/simple-rounded-corner-css-boxes...
The one I chose is inspired from this example: http://www.sitepoint.com/article/css-round-corners...
<div class="bl">
<div class="br">
  <div class="tl">
   <div class="tr">
    Lorem ipsum dolor sit amet consectetur adipisicing elit
   </div>
  </div>
</div>
</div>
<div class="clear"> </div>

plus this css:

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}

In this example the images only cover the cornes, if you need them to strech out for the whole top or bottom, you have to make the tl or bl image wider. If you make it wide enough it´ll stretch as far as necessary.

Expert:	dustPuppy
Date:	Jul 19, 2007
Time:	09:03

Votes: Good (0) \| Bad (0) Login to rate this answer

CA Anti-Virus 2008 - Fortify your PC with early, automatic defense against the latest viruses!

Question Answered

This question has been answered, and points have been rewarded to the following experts:

dustPuppy:

You're welcome however to comment or give additional information or if you wish, you have the ability to write an Answer Summary for this question by clicking on the "Answer Summaries" Tab.

No summaries have been submitted yet. Want to be the first?

Respond to this question:

New User
Email:
Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User
Username:
Password:

Forgotten Password
Enter your email address below and we will resend your login information to you.
Email:

New User
Email:
Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User
Username:
Password:

Forgotten Password
Enter your email address below and we will resend your login information to you.
Email:

"Psst, Quomon is a great site. Pass it on." Tell a Friend | Link To Us | Save to Delicious | Digg it

All Questions

Language Options
English:	www.quomon.com
Español:	www.quomon.es

Quomon Blog

blog.quomon.com