Display a partial marquee box at four corner of a box - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Box

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Box

Description

Display a partial marquee box at four corner of a box

Demo Code

ResultView the demo in separate window 

<html>
 <head></head> 
 <body> 
  <div id="the_container" style="border: 1px solid #000; width:90%; height:90%; top: 5%; left: 5%; position: absolute;"> 
   <div id="corner_t_l" style="border-top: 1px dashed #000; border-left: 1px dashed #000; top: 10px; left: 10px; width: 30px; height: 30px; position: absolute;"></div> 
   <div id="corner_t_r" style="border-top: 1px dashed #000; border-right: 1px dashed #000; top: 10px; right: 10px; width: 30px; height: 30px; position: absolute;"></div> 
   <div id="corner_b_r" style="border-bottom: 1px dashed #000; border-right: 1px dashed #000; bottom: 10px; right: 10px; width: 30px; height: 30px; position: absolute;"></div> 
   <div id="corner_b_l" style="border-bottom: 1px dashed #000; border-left: 1px dashed #000; bottom: 10px; left: 10px; width: 30px; height: 30px; position: absolute;"></div> 
  </div>  <!--from   w  w  w . j a  v  a2 s  .c  o  m-->
 </body>
</html>

Related Tutorials