<!DOCTYPE html> <html> <meta charset="utf-8"> <title>The bounds calculation for border display items needs to take the border radius into account</title> <style> div { margin: 10px; height: 100px; width: 100px; box-sizing: border-box; border-radius: 50px; } #one { border-top: 10px solid blue; } #two { border-top: 1px solid blue; opacity: 0.5; border-bottom: 1px solid white; } #three { border-top: 1px solid blue; mix-blend-mode: overlay; border-bottom: 1px solid white; } </style> <div id="one"></div> <div id="two"></div> <div id="three"></div>