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

User · Accepted Answer

Another option with pure CSS would be something like this:

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

nav:after {
    background-color: grey;
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: -1;
}

Demo here

User · Answer

the answers said all the possible solutions  I have another one with BOX-SHADOW  here it is JSFIDDLE  and the code  nav       margin 0px auto      width 100       height 50px      background-color grey      float left      padding 10px      border 2px solid red      box-shadow  0 0 0 10px blue inset      it also support in IE9  so It s better than gradient solution  add proper prefixes for more support  IE8 dont support it  what a shame

User · Answer

Use the background-clip and box-shadow properties   1  Set background-clip  content-box - this restricts the background only to the content itself  instead of covering both the padding and border   2  Add an inner box-shadow with the spread radius set to the same value as the padding   So say the padding is 10px - set box-shadow  inset 0 0 0 10px lightGreen - which will make only the padding area light green   Codepen demo   x000D   x000D  nav   x000D    width  80   x000D    height  50px  x000D    background-color  gray  x000D    float  left  x000D    padding  10px     10px padding    x000D    border  2px solid red  x000D    background-clip  content-box      lt ----    x000D    box-shadow  inset 0 0 0 10px lightGreen      lt -- 10px spread radius    x000D    x000D  ul   x000D    list-style  none  x000D    x000D  li   x000D    display  inline-block  x000D    x000D   lt h2 gt The light green background color shows the padding of the element lt  h2 gt  x000D   lt nav gt  x000D     lt ul gt  x000D       lt li gt  lt a href  index html  gt Home lt  a gt  x000D       lt  li gt  x000D       lt li gt  lt a href   about   gt About lt  a gt  x000D       lt  li gt  x000D       lt li gt  lt a href   blog   gt Blog lt  a gt  x000D       lt  li gt  x000D     lt  ul gt  x000D   lt  nav gt  x000D   x000D   x000D    For a thorough tutorial covering this technique see this great css-tricks post

User · Answer

This would be a proper CSS solution which works for IE8 9 as well  IE8 with html5shiv ofcourse   codepen  nav     margin 0px auto    height 50px    background-color gray    padding 10px    border 2px solid red    position  relative    color  white    z-index  1     nav after     content        background  black    display  block    position  absolute    margin  10px    top  0    right  0    bottom  0    left  0    z-index  -1

User · Answer

There is no exact functionality to do this   Without wrapping another element inside  you could replace the border by a box-shadow and the padding by the border  But remember the box-shadow does not add to the dimensions of the element   jsfiddle is being really slow  otherwise I d add an example

User · Answer

I am sorry everyone that this is the solution the true one where you dont have to actually set the padding    http   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

User · Answer

You can do a div over the padding as follows    lt div id   paddingOne  gt   lt  div gt   lt div id   paddingTwo  gt   lt  div gt    paddingOne   width  100  length  100  background-color   000000  margin  0  z-index  2     paddingTwo   width  200  length  200  background-color   ffffff  margin  0  z-index  3    the width  length  background color  margins  and z-index can vary of course  but in order to cover the padding  the z-index must be higher than 0 so that it will lay over the padding  You can fiddle with positioning and such to change its orientation  Hope that helps   P S  the divs are html and the  paddingOne and  paddingTwo are css  in case anyone didn t get that

User · Answer

I d just wrap the header with another div and play with borders    lt div class  header-border  gt  lt div class  header-real  gt        lt p gt Foo lt  p gt    lt  div gt  lt  div gt    CSS    header-border   border  2px solid  000000     header-real   border  10px solid  003399  background   cccccc  padding  10px

User · Answer

You can t set colour of the padding   You will have to create a wrapper element with the desired background colour  Add border to this element and set it s padding   Look here for an example  http   jsbin com abanek 1 edit

User · Answer

You can use background-gradients for that effect  For your example just add the following lines  it is just so much code because you have to use vendor-prefixes    background-image       -moz-linear-gradient top   000 10px  transparent 10px       -moz-linear-gradient bottom   000 10px  transparent 10px       -moz-linear-gradient left   000 10px  transparent 10px       -moz-linear-gradient right   000 10px  transparent 10px   background-image       -o-linear-gradient top   000 10px  transparent 10px       -o-linear-gradient bottom   000 10px  transparent 10px       -o-linear-gradient left   000 10px  transparent 10px       -o-linear-gradient right   000 10px  transparent 10px   background-image       -webkit-linear-gradient top   000 10px  transparent 10px       -webkit-linear-gradient bottom   000 10px  transparent 10px       -webkit-linear-gradient left   000 10px  transparent 10px       -webkit-linear-gradient right   000 10px  transparent 10px   background-image       linear-gradient top   000 10px  transparent 10px       linear-gradient bottom   000 10px  transparent 10px       linear-gradient left   000 10px  transparent 10px       linear-gradient right   000 10px  transparent 10px     No need for unecessary markup   If you just want to have a double border you could use outline and border instead of border and padding   While you could also use pseudo-elements to achieve the desired effect  I would advise against it  Pseudo-elements are a very mighty tool CSS provides  if you  waste  them on stuff like this  you are probably gonna miss them somewhere else   I only use pseudo-elements if there is no other way  Not because they are bad  quite the opposite  because I don t want to waste my Joker

[css] Can I add background color only for padding?

Examples related to css