corner-joins-1.xhtml (1427B)
1 <?xml version="1.0"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>border</title> 5 <style type="text/css"> 6 7 div.wrapper { 8 float: left; 9 margin-left: 20px; 10 margin-top: 10px; 11 } 12 13 div.test { 14 width: 144px; 15 height: 86px; 16 border-radius: 72px; 17 border-top: 18px solid; 18 border-bottom: 18px solid; 19 background: red; 20 margin-bottom: 20px; 21 } 22 23 div.cover, div.cover2 { 24 position: absolute; 25 border: 4px solid white; /* cover areas that may differ */ 26 width: 140px; 27 height: 118px; 28 border-radius: 63px; 29 margin-left: -2px; 30 margin-top: -2px; 31 } 32 div.cover2 { 33 height: 82px; 34 margin-top: 16px; 35 border-radius: 63px / 45px; 36 } 37 38 #one { 39 border-color: blue; 40 } 41 42 #two { 43 border-bottom-color: blue; 44 } 45 46 #three { 47 border-color: blue; 48 border-left: 0.01px solid red; 49 border-right: 0.01px solid red; 50 } 51 52 #four { 53 border-bottom-color: blue; 54 border-left: 0.001px solid red; 55 border-right: 0.001px solid red; 56 } 57 58 </style> 59 </head> 60 <body> 61 <div class="wrapper"> 62 <div class="cover"></div> 63 <div class="cover2"></div> 64 <div class="test" id="one"></div> 65 <div class="cover"></div> 66 <div class="cover2"></div> 67 <div class="test" id="two"></div> 68 </div> 69 <div class="wrapper"> 70 <div class="cover" style="width: 142px"></div> 71 <div class="cover2" style="margin-left: -1px; border-radius: 61px / 45px"></div> 72 <div class="test" id="three"></div> 73 <div class="cover"></div> 74 <div class="cover2"></div> 75 <div class="test" id="four"></div> 76 </div> 77 </body> 78 </html>