CODEWITHSUNDEEP
htmlcss
arunmmanoharan
arunmmanoharan

Reputation: 2675

Remove right side of box-shadow - CSS

I have a div having a box-shadow. I would like to remove the right-side of it but would not like to add any new code however can modify the existing box-shadow property. I used clip-path but I want it to work on IE as well.Please advice.

.test1 {
  box-shadow: 0 0 0 1px rgba(138, 155, 168, 0.6), 0 0 0 rgba(138, 155, 168, 0), 0 1px 1px rgba(138, 155, 168, 0.3);
  padding: 20px;
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
}
<div class="test1">MY AWESOME CONTENT</div>

Please advice.

Upvotes: 0

Views: 1134

Answers (3)

Temani Afif
Temani Afif

Reputation: 272648

use an extra white shadow that will hide the one you don't need:

.test1 {
  box-shadow: 
   1px 0 1px #fff,
   0 0 0 1px rgba(138, 155, 168, 0.6), 
   0 1px 1px rgba(138, 155, 168, 0.3);
  padding: 20px;
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
}
<div class="test1">MY AWESOME CONTENT</div>

Upvotes: 1

Jason Tracey
Jason Tracey

Reputation: 106

.test1 {
  box-shadow: -1px 0 0 1px rgba(138, 155, 168, 0.6), 0 0 0 rgba(138, 155, 168, 0), 0 1px 1px rgba(138, 155, 168, 0.3);
  padding: 20px;
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
}

This appears to do the trick as far as I can tell. The latter two box shadows don't appear to do anything however. If you're just looking for a border, there are better ways to do it.

Upvotes: 0

Dylan Anlezark
Dylan Anlezark

Reputation: 1267

Just move the shadow to the left till it is behind the element as so ...

.test1 {
  box-shadow: -1px 0 0 1px rgba(138, 155, 168, 0.6), 0 0 0 rgba(138, 155, 168, 0), 0 1px 1px rgba(138, 155, 168, 0.3);
  padding: 20px;
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
}
<div class="test1">MY AWESOME CONTENT</div>

Upvotes: 2

Related Questions