Compare border with outline - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Border Style

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

Description

Compare border with outline

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Border vs Outline</title> 
  <style>

.bordered, .outlined {<!--   w w w .ja va2  s . co  m-->
   display: table;
   margin: 1em;
}
.bordered div, .outlined div {
   display: table-cell;
   width: 100px;
   height: 100px;
}
.bordered .highlight {
   border: 10px solid orange;
   background: transparent;
}
.outlined .highlight {
   outline: 10px solid red;
   background: transparent;
}
.offset {
   outline-offset: -10px;
}
.bordered div, .outlined div {
   background: #CCC;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="bordered"> 
   <div></div> 
   <div class="highlight"></div> 
   <div></div> 
  </div> 
  <div class="outlined"> 
   <div></div> 
   <div class="highlight"></div> 
   <div></div> 
  </div> 
  <div class="outlined"> 
   <div></div> 
   <div class="highlight offset"></div> 
   <div></div> 
  </div>  
 </body>
</html>

Related Tutorials