borders-005-ref.html (1006B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <style> 4 .container { 5 float: left; 6 width: 200px; 7 height: 100px; 8 margin-right: 10px; 9 } 10 .box { 11 border-radius: 80px; 12 border: 20px solid hotpink; 13 background: yellow; 14 } 15 .skip-start { 16 border-top-left-radius: 0; 17 border-top-right-radius: 0; 18 border-top: none; 19 } 20 .skip-end { 21 border-bottom-left-radius: 0; 22 border-bottom-right-radius: 0; 23 border-bottom: none; 24 } 25 </style> 26 <p>There should be a yellow box that starts in the first column and ends in the 27 third. The border should be rounded at the start (first column) and at the end 28 (last column).</p> 29 <div class="container"> 30 <div class="box skip-end" style="height:80px;"></div> 31 </div> 32 <div class="container"> 33 <div class="box skip-start skip-end" style="height:100px;"></div> 34 </div> 35 <div class="container"> 36 <div class="box skip-start" style="height:70px;"></div> 37 </div>