overflow-clip-margin-visual-box-and-value-with-border-radius-ref.html (1263B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Verifies overflow-clip-margin supports visual-box</title> 4 <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> 5 <link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> 6 <style> 7 .container { 8 width: 100px; 9 height: 100px; 10 overflow: visible; 11 padding: 10px; 12 border: 10px solid black; 13 margin: 10px; 14 border-radius: 0px 15px 25px 35px; 15 background: grey; 16 } 17 18 .inner_border_box { 19 width: 150px; 20 height: 150px; 21 position: relative; 22 top: -25px; 23 left: -25px; 24 background: blue; 25 border-radius: 0px 15.55px 30px 40px; 26 } 27 28 .inner_padding_box { 29 width: 130px; 30 height: 130px; 31 position: relative; 32 top: -15px; 33 left: -15px; 34 background: blue; 35 border-radius: 0px 10px 20px 30px; 36 } 37 38 .inner_content_box { 39 width: 110px; 40 height: 110px; 41 position: relative; 42 top: -5px; 43 left: -5px; 44 background: blue; 45 border-radius: 0px 0px 10px 20px; 46 } 47 </style> 48 <div class="container"> 49 <div class="inner_border_box"></div> 50 </div> 51 <div class="container"> 52 <div class="inner_padding_box"></div> 53 </div> 54 <div class="container"> 55 <div class="inner_content_box"></div> 56 </div>