Color div without coloring fill area

Question

If I have a div:

<div></div>

And some css to give it color:

div {
    width: 200px;
    height: 200px;
    padding: 20px;
    background-color: red;
}

Then it also paints the fill area. Is there a way to avoid this without changing the border or field properties?

Answer 1

you can use

background-clip: content-box;

Answer 2

You can create two squares of different sizes, one inside the other.

See this script: http://jsfiddle.net/a_incarnati/5ouvn063/2/

CSS

div.inner {
    width: 200px;
    height: 200px;
    padding: 20px;
    background-color: red;
}
div.outer {
    width: 240px;
    height: 240px;
    padding: 20px;
    background-color: blue;        
}

HTML

<div class="outer"><div class="inner"></div></div>

In fact, you can even remove the width and height of the outer div and place the element to the left.

EDIT

div.inner {
    width: 200px;
    height: 200px;
    padding: 20px;
    background-color: red;
}
div.outer {
    padding: 20px;
    background-color: blue;
    float:left; 
    text-align:center;    
}

DEMO # 2 http://jsfiddle.net/a_incarnati/5ouvn063/3/