CODEWITHSUNDEEP
css
Cain Nuke
Cain Nuke

Reputation: 3079

Css: box shadow only for 3 or less borders?

i have a box with a border going all around it as well as a box shadow and an outline. However, i dont need the box shadow for the top border so i want to make it disappear but WITHOUT MOVING THE BOX DOWN. Is it possible to do that? If not, what other alternative i have?

This is my code:

.box {
  background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
  border: 4px solid black;
  box-shadow: 0 0 0 5px #826200;
  outline: 2px solid white;
}

Fiddle:

http://jsfiddle.net/x7rrj/

Upvotes: 0

Views: 713

Answers (4)

Cain Nuke
Cain Nuke

Reputation: 3079

Okay, no doubt I'm a genius! This solves my problem:

.box {
  background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
  border: 4px solid black;
  box-shadow: 0 0 0 5px #826200;
  outline: 3px solid white;
}

.box:before {
  border-top: 2px solid white;
  content: "";
  margin: -9px 0 7px -7px;
  padding: 0 100%;
  position: absolute;
  width: auto;
}

Thank you everybody for your ideas!

Upvotes: 0

Gibbs
Gibbs

Reputation: 22964

Fiddle Demo

You can't remove only top box shadow. But you can hide it. As per your code

.box {
 background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
 border: 4px solid black;
 box-shadow: 0 4px 0 5px red;
 outline: 2px solid white;
 width:100px;
 height:100px;
}

You can use the above css.

EDIT FIDDLE

Yeah it is messy at the bottom . So see my alternative solution. Enlcose the div with a container and add border property. It ll not be messy

EDIT DEMO

CSS only solution using before pseudo element and border property.

Upvotes: 2

Ved
Ved

Reputation: 8767

Just remove the border side which you don't want to show like - 

  border-left: 0;

OR in width also, you can manage the same like - 

  border-width: 0 1px 1px 1px;

Upvotes: 0

CRABOLO
CRABOLO

Reputation: 8793

You can't specifically just remove the top box shadow. However, you can adjust the y-axis so it doesn't appear at the top, but it moves the whole box-shadow down.

For example, try

box-shadow: 0 4px 0 5px #826200;

This moves the shadow down 4 pixels. -4px would move it up 4 pixels which is the opposite of what you want.

So see how 4px looks to you, and you can try adjusting it to different values to see what works best for you.

Upvotes: 0

Related Questions