How to make shadow on border-bottom

Question

I need to apply the border shadow on border-bottom by CSS3  I just want to apply CSS3 shadow on bottom  Is this possible

User · Answer

New method for an old question    It seems like in the answers provided the issue was always how the box border would either be visible on the left and right of the object or you d have to inset it so far that it didn t shadow the whole length of the container properly   This example uses the  after pseudo element along with a linear gradient with transparency in order to put a drop shadow on a container that extends exactly to the sides of the element you wish to shadow   Worth noting with this solution is that if you use padding on the element that you wish to drop shadow  it won t display correctly   This is because the after pseudo element appends it s content directly after the elements inner content   So if you have padding  the shadow will appear inside the box   This can be overcome by eliminating padding on outer container  where the shadow applies  and using an inner container where you apply needed padding   Example with padding and background color on the shadowed div     If you want to change the depth of the shadow  simply increase the height style in the after pseudo element   You can also obviously darken  lighten  or change colors in the linear gradient styles    x000D   x000D  body   x000D    background   eee  x000D    x000D   x000D   bottom-shadow   x000D    width  80   x000D    margin  0 auto  x000D    x000D   x000D   bottom-shadow after   x000D    content      x000D    display  block  x000D    height  8px  x000D    background  transparent  x000D    background  -moz-linear-gradient top  rgba 0 0 0 0 4  0   rgba 0 0 0 0  100       FF3 6-15    x000D    background  -webkit-linear-gradient top  rgba 0 0 0 0 4  0  rgba 0 0 0 0  100       Chrome10-25 Safari5 1-6    x000D    background  linear-gradient to bottom  rgba 0 0 0 0 4  0  rgba 0 0 0 0  100       W3C  IE10   FF16   Chrome26   Opera12   Safari7     x000D    filter  progid DXImageTransform Microsoft gradient    startColorstr   a6000000   endColorstr   00000000  GradientType 0       IE6-9    x000D    x000D   x000D   bottom-shadow div   x000D    padding  18px  x000D    background   fff  x000D    x000D   lt div class  bottom-shadow  gt  x000D     lt div gt  x000D      Shadows  FTW  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Try    x000D   x000D  div  x000D  -webkit-box-shadow 0px 1px 1px  de1dde  x000D   -moz-box-shadow 0px 1px 1px  de1dde  x000D   box-shadow 0px 1px 1px  de1dde  x000D      x000D   lt div gt wefwefwef lt  div gt  x000D   x000D   x000D    It generally adds a 1px blurred shadow 1px from the bottom of the box  box-shadow   horizontal offset   vertical offset   blur radius   color

User · Answer

I m a little late on the party  but its actualy possible to emulate borders using a box-shadow   x000D   x000D   border   x000D    background-color   ededed  x000D    padding  10px  x000D    margin-bottom  5px  x000D    x000D   x000D   border-top   x000D    box-shadow  inset 0 3px 0 0 cornflowerblue  x000D    x000D   x000D   border-right   x000D    box-shadow  inset -3px 0 0 cornflowerblue  x000D    x000D   x000D   border-bottom   x000D    box-shadow  inset 0 -3px 0 0 cornflowerblue  x000D    x000D   x000D   border-left   x000D    box-shadow  inset 3px 0 0 cornflowerblue  x000D    x000D   lt div class  border border-top  gt border-top lt  div gt  x000D   lt div class  border border-right  gt border-right lt  div gt  x000D   lt div class  border border-bottom  gt border-bottom lt  div gt  x000D   lt div class  border border-left  gt border-left lt  div gt  x000D   x000D   x000D    EDIT  I understood this question wrong  but I will leave the awnser as more people might misunderstand the question and came for the awnser I supplied

User · Answer

funny  that in the most answer you create a box with the text  or object   instead of it create the text  or object  div and under that a box with 100  width  or at least what it should  and with height what equal with your  border  px    So  i think this is the most simple and perfect answer    lt h3 gt Your Text lt  h3 gt  lt div class  border-shadow  gt  lt  div gt   and the css        shadow           width 100           height 1px        border height  without the shadow            background  000        border color           -webkit-box-shadow  0px 1px 8px 1px rgba 0 0 0 1      rbg    border shadow color           -moz-box-shadow  0px 1px 8px 1px rgba 0 0 0 1      rbg    border shadow color           box-shadow  0px 1px 8px 1px rgba 0 0 0 1      rbg    border shadow color        Here you can experiment with the radius  etc  easy  https   www cssmatic com box-shadow

User · Answer

use box-shadow with no horizontal offset   http   www css3 info preview box-shadow   eg    x000D   x000D  div   x000D    -webkit-box-shadow  0 10px 5px  888888  x000D    -moz-box-shadow  0 10px 5px  888888  x000D    box-shadow  0 10px 5px  888888  x000D    x000D   lt div gt wefwefwef lt  div gt  x000D   x000D   x000D    There will be a slight shadow on the sides with a large blur radius  5px in above example

User · Answer

The issue is shadow coming out the side of the containing div  In order to avoid this  the blur value must equal the absolute value of the spread value    x000D   x000D  div   x000D    -webkit-box-shadow  0 4px 6px -6px  222  x000D    -moz-box-shadow  0 4px 6px -6px  222  x000D    box-shadow  0 4px 6px -6px  222  x000D    x000D   lt div gt wefwefwef lt  div gt  x000D   x000D   x000D    covered in depth here

[css] How to make shadow on border-bottom?

Examples related to css