Register  |  Login

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

 

Other Questions Needing Answers


   

Answer Discussion
Answer Discussion
Answer Summaries
Answer Summary
 
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...
The one I chose is inspired from this example: http://www.sitepoint.com/article/css-rou...
<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">&nbsp;</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

Question Answered

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

dustPuppy: 75

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

 

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

   

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


All Questions


Language Options

English:

www.quomon.com

Español:

www.quomon.es

Quomon Blog

blog.quomon.com

Sponsors

Questions and Answers Software
Real Estate Postcards
Marketing Fulfillment