How do I make a Div that has round corners and a background colour?

Question

When I assign "background-color: foo;" to a element in my CSS file I do not get any colour. What other attributes do i need to declare, I have a absolute width set? Does it need a parent container (it has a basic as a parent)? What am I missing here?!

Also I'd like to give it round-corners using HTML5. Corners only have to work in Safari as it's for a web app not general consumption.

Answer 1

It seems you have 2 questions: 1. set background to an element; 2. you wanna set round corners to an element and works in safari.

1. if you element is div tag, you need to set width,and height of your div tag, e.g:

   <div id='mydiv'>some elements here</div>

Your css:

   #mydiv { 
      background-color: #111;
      height: 100px;
      width:100px
   }

2. Setting round-corner(code below works for all browsers):

   .round-corner {
      -webkit-border-radius: 5px 5px 5px 5px; 
      -moz-border-radius: 5px 5px 5px 5px;
      -o-border-radius: 5px 5px 5px 5px;
      border-radius: 5px 5px 5px 5px;
   }

Answer 2

Background color has to be in hex or a valid string recognizable by the browser

So, something like this:

background: #F0F0F0;

or

background: white;

For borders:

border-radius: 4px;

Demo