<p>Hello</p>
<p>Hello</p>
<p><span style="border: 5px dotted blue; border-radius: 1em;">Hello</span></p>
<p>Hello</p>
<p>Hello</p>
As rendered in Chrome:
When rendered, the border 'takes up space' and offsets the location of the content as well as increasing the size required for the content. Is there a way to make the border not do that? That is, have the border without any of the spacing/padding effects of the border?
The desired effect would be that the content is always in the same position whether or not it has a border (e.g. all the H in he above screenshot would have the same horizontal alignment). I can accept the border overlapping the content as well as extending outward, but if possible I would like to know how to do both.
I have considered making the border always present but transparent when not needed, however that makes spacing and padding quite a nuisance and I want to have borders of different sizes.
Note: I am able to use CSS3 and HTML5, if required.
outline
does the same thing as border but doesn't take up any space.outline-radius
though.