How to give shadow to a border

Question

How to give shadow to a border?

css codes:

p{
  border-right:2px solid black;
  line-height:4em
}

Now is it possible to give shadow to this border?

Answer 1

Depends on what type of shadow do you want to achieve

Dynamically generate the border and add the shadow

p {
    line-height:4em;
    position: relative;
}

p::after {
    content: ' ';
    width: 2px;
    height: 4em;
    background-color: black;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: 3px 3px 2px red;
}

<p>Stack Overflow</p>

Simple offset shadow to the right

p {
    border-right:2px solid black;
    line-height:4em;
    box-shadow: 2px 0px red;
}

<p>Stack overflow</p>

Answer 2

You can do this with box-shadow

p {
  border-right: 2px solid black;
  line-height:4em;
  display: inline-block;
  -webkit-box-shadow: 15px 0px 10px -10px rgba(0,0,0,0.51);
  -moz-box-shadow: 15px 0px 10px -10px rgba(0,0,0,0.51);
  box-shadow: 15px 0px 10px -10px rgba(0,0,0,0.51);
}

<p>Lorem ipsum dolor.</p>

Or try :after and linear-gradient

p {
  border-right: 2px solid black;
  line-height:4em;
  display: inline-block;
  position: relative;
}

p:before {
  position: absolute;
  z-index: -1;
  top: 10%;
  right: -5px;
  width: 5px;
  height: 100%;
  background: linear-gradient(transparent, #aaa, transparent);
  content: '';
}

<p>Lorem ipsum dolor.</p>

Answer 3

p{
    border-right:2px solid black;
    line-height:4em;
    box-shadow: 10px 10px 5px #000000;
}