Can I add background color only for padding?

Question

I have a header box including border and padding and background color for that box, can I change the background color only for the padded region after the border and then the same background color for the rest of the width (i.e. grey in the given code)?

Just a pinch of the code where I want the padded background color:

nav {     margin:0px auto;     width:100%;     height:50px;     background-color:grey;     float:left;     padding:10px;     border:2px solid red; } 

Answer 1

I am sorry everyone that this is the solution the true one where you don't have to actually set the padding.

https://jsfiddle.net/techsin/TyXRY/1/

What I have done...

• Applied two gradients on background with both having one start and end color. Instead of using solid color. Reason being that you can't have two solid colors for one background.
• Then applied different background-clip property to each.
• thus making one color extend to content box and other to border, revealing the padding.

Clever if I say so to myself.

div {   padding: 35px;   background-image: linear-gradient(to bottom, rgba(240, 255, 40, 1) 0%, rgba(240, 255, 40, 1) 100%), linear-gradient(to bottom, rgba(240, 40, 40, 1) 0%, rgba(240, 40, 40, 1) 100%);   background-clip: content-box, padding-box; }

<p>Padding IS COLORED</p> <div>Mexican’t professor plum charlie chaplin? Facial accessory lorreto del mar Daniel plainview landed gentry circus strongman sam elliott zap rowsdower, lorreto del mar off-piste frightfully nice mustachio landed gentry Daniel plainview zap rowsdower toothbrush   circus strongman boogie nights sam elliott Daniel plainview facial accessory, Daniel plainview man markings boogie nights mr frothy-top sam elliott worn with distinction mustachio zap rowsdower off-piste Daniel plainview toothbrush lorreto del mar frightfully   nice wario facial accessory mr frothy-top landed gentry circus strongman prostate cancer? Rock n roll star gunslinger villain marquess of queensbury en time-warped cabbie off-piste graeme souness en time-warped cabbie, cunning like a fox gunslinger   dodgy uncle clive villain karl marx marquess of queensbury en time-warped cabbie graeme souness rock n roll star off-piste en time-warped cabbie, rock n roll star lemmy dodgy uncle clive graeme souness professor plum en time-warped cabbie villain gunslinger   en time-warped cabbie marquess of queensbury cunning like a fox devilish cad off-piste karl marx. John aldridge basil fawlty landed gentry louis xiii sam elliott brigadier, et sodales cum dick van dyke mouth coiffure louis xiii landed gentry basil fawlty   john aldridge stiff upper lip brigadier crumb catcher sam elliott?</div>