title: Make parent's pseudo opacity clip to childs border radius
body: <p>I am trying to get my parent to overlap an opacity (dimmed) style to a child element, but this child element can have different border radius' - <code>10px</code>, <code>50%</code>, etc. I am trying to make the overlay clip dynamically.</p>
  
  <p>If I set it to <code>100%</code>, it works for <code>50%</code>, but breaks for <code>10px</code> and so on.</p>
  
  <p>Unfortunately the HTML mark up cannot be moved around much.</p>
  
  <p>Is this possible to achieve? The end result is there should be no bright red in the fiddle, as it should be completely covered by the opacity overlay.</p>
  
  <p><a href="https://jsfiddle.net/7nfLqpbt/1/" rel="nofollow noreferrer">JSFiddle Link</a></p>