CODEWITHSUNDEEP
css
Fortytwo
Fortytwo

Reputation: 127

How can I set border bottom to none while using box shadow inset?

I just want no border on the bottom of the box, or is it not possible? The reason I am using 'box-shadow:inset' instead of the regular border style because it does not alters my box size and shifts my box out of position. 

.box {
    width: 82px;
    height: 56px;
    box-shadow:inset 0px 0px 0px 5px #AC92C4;
    border-radius: 5px 5px 0px 0px;
}

https://jsfiddle.net/dcaktwuz/

Upvotes: 0

Views: 907

Answers (2)

Johannes
Johannes

Reputation: 67748

You wrote:

The reason I am using 'box-shadow:inset' instead of the regular border style because it does not alters my box size and shifts my box out of position.

You can still try to make a border (with border-bottom: none;) and add box-sizing: border-box, which will include the borders (and padding) in the overall width and height of the element.

Upvotes: 1

Oriol
Oriol

Reputation: 288000

You can shift shadows:

.box {
  display: inline-block;
  vertical-align: middle;
  width: 82px;
  height: 56px;
  border-radius: 5px 5px 0px 0px;
  border: 1px solid #ccc;
}
.shift1 {
  box-shadow: inset 5px 5px 0px 5px #AC92C4;
}
.shift2 {
  box-shadow: inset -5px 5px 0px 5px #AC92C4;
}
.shift1.shift2 {
  box-shadow: inset 5px 5px 0px 5px #AC92C4, inset -5px 5px 0px 5px #AC92C4;
}
<div class="box shift1"></div> + <div class="box shift2"></div> =
<div class="box shift1 shift2"></div>

Upvotes: 1

Related Questions