CODEWITHSUNDEEP
css
rickvian
rickvian

Reputation: 145

how to add box-shadow effect, only to border of div?

I tried to achieve Shadow effect on the border only like simulated in Adobe XD below

enter image description here

I tested to remove the color of background but it hides the shadow within container

<style>
  body {
    padding: 30px;
  }
  
  .border-shadow {
    box-shadow: 1px 1px 5px black;
    background-color: transparent;
    width: 100px;
    padding: 10px;
  }
</style>

<div class="border-shadow">
  tests
</div>

enter image description here

Is there any css only solution for this? Thank you.

Upvotes: 3

Views: 3440

Answers (4)

rickvian
rickvian

Reputation: 145

been working for bout an hour before i posted the question, suprisingly i found the answer just moment after

by using filter css : drop-shadow i can achieve this effect

 <style>
  body{
    padding:30px;
  }
  .border-shadow{
    border:5px solid black;
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));

    background-color:transparent;
    width:100px;
    padding:10px;
  }


</style>

<div class="border-shadow">
    <div class="test-text">
      Tests
    </div>
</div>

enter image description here

here is the pen Codepen

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272618

drop-shadow can also do it:

body {
  padding: 30px;
}

.border-shadow {
  border:1px solid;
  filter:drop-shadow(4px 4px 3px red);
  background-color: transparent;
  width: 100px;
  padding: 50px;
}
<div class="border-shadow">
  
</div>

Upvotes: 1

bhoodream
bhoodream

Reputation: 457

here is an example of achieving your goal!

We use the pseudo-element ::before and blur() effect.

div {
  position: relative;
  width: 344px;
  height: 121px;
  border: 2px solid #bed5e6;
  border-radius: 2px;
}

div::before {
  content: '';
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  border: 5px solid rgba(0,0,0,.07);
  border-radius: 2px;
  width: 100%;
  height: 100%;
  filter: blur(4px);
}
<div><h1>Test</h1></div>

Upvotes: 2

BenM
BenM

Reputation: 53198

You can combine an inset box shadow with a standard one to achieve this look:

#myDiv {
  background: transparent;
  border: 1px solid skyBlue;
  box-shadow: inset 3px 3px 5px rgba(0,0,0,.1), 3px 3px 5px rgba(0,0,0,.1);
  height: 100px;
  width: 250px;
}
<div id="myDiv">

</div>

Alternatively, you can use the ::after psuedo-element and apply a thicker border and blur as follows:

#mydiv {
  background: transparent;
  border: 1px solid skyBlue;
  height: 100px;
  position: relative;
  width: 250px;
}

#mydiv::after {
  border: 3px solid #ccc;
  content: '';
  display: block;
  filter: blur(2px);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
<div id="mydiv"></div>

Upvotes: 2

Related Questions