title: Round cap underline in CSS
body: <p><img src="https://i.stack.imgur.com/Ef5ik.png" alt="enter image description here"></p>
  
  <p>Can you make round cap underlines (as in the above image) with CSS? How?</p>
  
  <p>Is there a way to do this with <code>border-bottom</code>? <code>border-radius</code> produces this stylish effect instead:</p>
  
  <p><img src="https://i.stack.imgur.com/JTIEy.png" alt="enter image description here"></p>