How to give shadow to a border


Tags: css

Problem :

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?



Solution :

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>


    CSS Howto..

    How to make a pure CSS div with a gradient background?

    How to proper align after CSS column-count

    CSS: how to center a list with image

    Can someone tell me how to implement this Javascript? HTML CSS

    How to float

    to bottom of a

    when you can't use position:relative and position:absolute

    How to clear the bottom of an image like clear left / right

    How do I get jQuery to change classes according to an If/Then statement. My 'home' link will not change class when another link clicked on

    How did Blizzard achieve the layered cockpit view for the Starcraft II website?

    How can I make my wrapper
    vertically centered and responsive?

    CSS - How to Draw a Multi-Coloured Line?

    Show and hide table column using jQuery

    How can i change jquery-div creation to some other method

    in html and css how to get the box space to be smaller? [closed]

    How to fade CSS sprite images using CSS background-position with jQuery?

    How to align navigation links after navigation menu is collapsed using bootstrap

    how to search with GET method in MVC

    Images not showing up in IE 9

    How to get CSS pseudo-elements to look the same cross browser?

    Css positioning: how to position a block/paragraph under another

    How to change HTML markup structure using javascript or CSS?

    How can I apply an external CSS class to a span created with dojo.create?

    CSS: Formatting blocks. Strange height behaviour or how to adjust height by content inside th block

    How do you make Static tool tip with CSS?

    How to persist checking the screen width in Javascript

    How to get border width in jQuery/javascript

    How to figure out if CSS transition is about to happen?

    How to add external CSS to HTML 'style'

    Howto include application css into mailer views in Rails 3.1

    How am I supposed to address elements that are not a direct child of a given element in CSS?

    How to style a table-like div with css? How to fill a “column”?