Create Border effect to let a picture stand out - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Border Style

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Border Style

Description

Create Border effect to let a picture stand out

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

div {<!--from   w w  w. j a  v a  2 s .  c  o m-->
   width: 215px;
   height: 80px;
   border: 1px solid #ccc;
   position: relative;
   background: white;
}
div::before, div::after {
   box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
   -webkit-transform: rotate(-8deg);
   transform: rotate(-8deg);
   position: absolute;
   left: 10px;
   bottom: 12px;
   z-index: -1;
   width: 50%;
   max-width: 100px;
   height: 20px;
   content: "";
}
div::after {
   -webkit-transform: rotate(8deg);
   transform: rotate(8deg);
   right: 10px;
   left: auto;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div></div>  
 </body>
</html>

Related Tutorials