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;
}

I don't think so, but I'd *love* to proved wrong. (I imagine you'd need to nest an element.) — David Thomas, Jan 31 '13 at 14:53
EliGassert umm.. then wat can i do to have box with different colors inside it? — Pavan Nadig, Jan 31 '13 at 14:55
@DavidThomas - Nowadays this can be done via the `background-clip` and `box-shadow` properties [demo here](http://stackoverflow.com/a/35252091/703717) — Danield, Feb 15 '16 at 10:45

score 116 · Answer 1 · edited Sep 17 '21 at 03:31

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>

Very clever. I've cleaned up the fiddle slightly: http://jsfiddle.net/ilancopelyn/n1ax4qvt/ — Ilan, Feb 20 '15 at 11:17
right now it's on http://jsfiddle.net/TyXRY/123/ (123) but what they are doing or who is doing is not clear to me. — Muhammad Umer, Feb 20 '15 at 14:47
I like this. Too bad the middle (ie. content-box) can't be transparent and punch a hole through to the underlying (eg. body) colour. I just see the outer gradient in Chrome when I tried this. — MSC, May 20 '15 at 12:33
Genious! Is there a way to attach a transition to it? I tried but didn’t succeed. — Garavani, Jun 17 '15 at 16:15
`transition: all 0.3s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);` — Benny K, Oct 25 '18 at 15:26
nice this works too `transition: padding 0.3s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);` — Muhammad Umer, Oct 25 '18 at 19:41
@Ilan That looks great, but what if I want to show the margin too? I'd do it myself, but I'm a rookie at this. — carloswm85, May 11 '20 at 19:38

Danield · Answer 2 · 2016-06-28T11:49:41.713

75

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

nav {
  width: 80%;
  height: 50px;
  background-color: gray;
  float: left;
  padding: 10px; /* 10px padding */
  border: 2px solid red;
  background-clip: content-box; /* <---- */
  box-shadow: inset 0 0 0 10px lightGreen; /* <-- 10px spread radius */
}
ul {
  list-style: none;
}
li {
  display: inline-block;
}

<h2>The light green background color shows the padding of the element</h2>
<nav>
  <ul>
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="/about/">About</a>
    </li>
    <li><a href="/blog/">Blog</a>
    </li>
  </ul>
</nav>

For a thorough tutorial covering this technique see this great css-tricks post

edited Jun 28 '16 at 11:49

answered Feb 07 '16 at 10:02

Danield

121,619
37
226
255

2

What does `0 0 0` mean? – Nakilon Sep 24 '16 at 18:09
3

@Nakilon `box-shadow` has four properties. The `0 0 0` sets the `h-shadow` `v-shadow` and `blur` to 0, as the horizontal shadow, vertical shadow, and blur distance are unneeded in this implementation. It's just a solid shadow that goes inward (`inset`) for `10px`. – trlkly Sep 09 '17 at 09:37
Simple yet effective! – timgeb Jun 10 '19 at 12:46
Thank you so much, I use a fade-in for the content and your solution was the only one that left the content of the rectangle transparent. – Zdenek Jan 02 '22 at 12:33

score 45 · Accepted Answer · edited Sep 12 '21 at 18:44

45

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;
}

<nav>Some text or anything</nav>

Demo here

edited Sep 12 '21 at 18:44

Oleg Valter is with Ukraine

9,619
8
37
59

answered Jan 31 '13 at 15:04

gotohales

3,665
1
20
34

your pseudo-class element goes beyond it's parent box on the right side because of `width: 100%;` – Simon Jan 31 '13 at 15:13
Now the spacing on the right side is too big, just setting width 95% isn't too reliable, especially if the padding changes. ;) – Simon Jan 31 '13 at 15:18
@Simon can u please explain why have u placed the code `position:relative;` i can see if its not placed then it doesnt appear in the screen!.. but how does this work? – Pavan Nadig Jan 31 '13 at 15:44
2

@Pavan Nadig The position relative is so the z-index value can be added and take effect. Z-index only works on positioned elements. – gotohales Jan 31 '13 at 15:55
I think that's best explained [here](http://css-tricks.com/absolute-positioning-inside-relative-positioning/) – Simon Jan 31 '13 at 15:58
Clever solution! Better than the other because works on old browser. But I'm wondering if those `position: relative` and `position: absolute` will interfere on other elements of my website. – Vinicius Garcia Jan 15 '14 at 12:44
@vinigarcia87 They shouldn't cause any issues, as the absolutely positioned element is contained in the relative one. And unless you start adding properties like top, or left, the relative element will remain in place. – gotohales Jan 15 '14 at 15:06
This was very helpful in my case. The only solution that worked for me because I had to transition the background-color of the original element. Keeps that working flawlessly. Thanks, man! – Garavani Jun 17 '15 at 16:24

dave · Answer 4 · 2013-01-31T15:16:42.960

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.

If you can ignore IE9- you can do this with gradients, but pseudo-classes are at least supported down to IE8. — Simon, Jan 31 '13 at 15:23
That is true. But if there are a lot of thoses cases in might be worth using css3pie.com — dave, Jan 31 '13 at 15:28
What is waste? Are pseudo elements restricted to be used to a limited times? — Anwar, Feb 23 '15 at 04:30
Yes, they are limited. You have 2 for each element (1x ::before, 1x ::after). — dave, Feb 23 '15 at 12:31

Jan Hančič · Answer 5 · 2013-01-31T15:00:04.390

9

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

edited Jan 31 '13 at 15:00

answered Jan 31 '13 at 14:54

Jan Hančič

53,269
16
95
99

1

[Actually you can](http://stackoverflow.com/a/35252091/703717) (nowadays) - see [this great css-tricks post](https://css-tricks.com/the-backgound-clip-property-and-use-cases/) for a thorough explanation – Danield Feb 07 '16 at 10:50

score 7 · Answer 6 · answered Aug 15 '13 at 07:23

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 !

score 3 · Answer 7 · answered Feb 08 '22 at 13:36

3

in case you don't want to affect the content background, and you have different padding for each direction, use the following:

div {
  width: 440px;
  padding: 10px 20px 30px 40px;
  box-shadow: inset 0 10px 0 0 lightGreen, inset -20px 0 0 0 lightGreen, inset 0 -30px 0 0 lightGreen, inset 40px 0 0 0 lightGreen;
}

<div>The light green background color shows the padding of the element</div>

answered Feb 08 '22 at 13:36

adl

1,865
1
25
32

This worked perfectly with a DataTable subtable to highlight it: `.p-datatable-row-expansion > td { box-shadow: inset 0 5px 0 0 #81a1c1, inset -5px 0 0 0 #81a1c1, inset 0 -5px 0 0 #81a1c1, inset 5px 0 0 0 #81a1c1; } ` – Peter Illes Sep 11 '22 at 10:42

score 2 · Answer 8 · answered Jan 31 '13 at 14:56

2

I'd just wrap the header with another div and play with borders.

<div class="header-border"><div class="header-real">

    <p>Foo</p>

</div></div>

CSS:

.header-border { border: 2px solid #000000; }
.header-real { border: 10px solid #003399; background: #cccccc; padding: 10px; }

answered Jan 31 '13 at 14:56

rlatief

715
5
14

thats cool.. by the way, as i have used the whole box as `
` , how can i add classes to that?
– Pavan Nadig Jan 31 '13 at 15:03
I believe `
` can have classes. Take a look at @mookamafoob answer. I actually won't do it like that as I'm worried about browser support. But if you prefer HTML5/CSS3, that's the way to do it.
– rlatief Jan 31 '13 at 15:09

score 2 · Answer 9 · answered Jan 31 '13 at 14:57

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.

score 2 · Answer 10 · edited Sep 11 '21 at 18:41

This would be a proper CSS solution which works for IE8/9 as well (IE8 with html5shiv of course): 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;
}

<nav>lorem ipsum dolor sit amet</nav>

score 1 · Answer 11 · edited Sep 14 '21 at 12:02

1

Style the <hr> like this to get a solid line.

.line {
  height: 10px;
  color: black;
  margin: 0;
  border-style: solid;
  background-color: black;
}

<hr class="line">

edited Sep 14 '21 at 12:02

General Grievance

4,555
31
31
45

answered Sep 14 '21 at 11:10

Buyi Mihlali

11
1

score 0 · Answer 12 · answered May 30 '15 at 03:28

You can do a div over the padding as follows:

<div id= "paddingOne">
</div>
<div id= "paddingTwo">
</div>

#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:)

score 0 · Answer 13 · answered Nov 19 '21 at 11:56

Another trick:

Stack two divs one on top of the other, then apply different background-clip for each (bottom with padding-box, top with content-box):

.rect {
  width: 100px;
  height: 50px;
  border: red solid 5px;
  padding: 10px;
  position: absolute;
}
.bottom {
  background: yellow padding-box;
}
.top {
  background: pink content-box;
}

<div>
  <div class="rect bottom"></div>
  <div class="rect top"></div>
</div>

Linke:

Can I add background color only for padding?

13 Answers13

Use the `background-clip` and `box-shadow` properties.

Codepen demo

Linked

Can I add background color only for padding?

13 Answers13

Use the background-clip and box-shadow properties.

Codepen demo

Linked

Use the `background-clip` and `box-shadow` properties.