1156129-1-ref.html (580B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>The bounds calculation for border display items needs to take the border radius into account</title> 5 6 <style> 7 8 div { 9 margin: 10px; 10 height: 100px; 11 width: 100px; 12 box-sizing: border-box; 13 border-radius: 50px; 14 } 15 16 #one { 17 border-top: 10px solid blue; 18 } 19 20 #two { 21 border-top: 1px solid blue; 22 opacity: 0.5; 23 border-bottom: 1px solid white; 24 } 25 26 #three { 27 border-top: 1px solid blue; 28 mix-blend-mode: overlay; 29 border-bottom: 1px solid white; 30 } 31 32 </style> 33 34 <div id="one"></div> 35 <div id="two"></div> 36 <div id="three"></div>