clip-border-area-ref.html (800B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 .test { 6 display: inline-block; 7 margin: 20px; 8 width: 300px; 9 height: 150px; 10 box-sizing: border-box; 11 border: 50px solid blue; 12 } 13 14 .rounded { 15 border-radius: 40%; 16 } 17 18 .missing-border { 19 border-right-style: hidden; 20 } 21 22 .double { 23 border-style: double; 24 } 25 26 .inset { 27 border-style: solid; 28 } 29 30 .complex { 31 border-right-style: double; 32 border-bottom-style: dashed; 33 border-left-style: dotted; 34 } 35 </style> 36 </head> 37 <body> 38 39 <div class="test"></div> 40 <div class="test rounded"></div> 41 <div class="test missing-border"></div> 42 <div class="test double"></div> 43 <div class="test inset"></div> 44 <div class="test complex"></div> 45 46 </body> 47 </html>