Question

Hi need a css for the following mock up

how to make border leaving 10 px on both ends on bottom,with a background fill.

Answer 1

For this to look right, you’ll need nested div:

.inner {
    margin-right: 10px;
    background: #666;
    border-bottom: 2px solid #000;
    width: 200px; 
    padding-bottom: 10px;
}

.outer {
    width: 200px; 
    border: 10px solid #666; /* your grey fill */
    border-bottom: none;
}

Demonstration

Just mess with padding-top and padding-bottom on the .inner element to get the spacing you want.