Menu
How to achieve an outside border only on text of any length which could span multiple lines, must be responsive.
Looking for styling similar to below image.
This is what I've tried so far, struggling with top border and responsiveness over screen sizes and using various font sizes, the best I've got, might be going about this all wrong though:
http://www.cssdesk.com/7nxBa
Making text smaller shows overlapping right border, making text LARGER shows top border...
309
asked Nov 19 '25 11:11
I found the 'outline' css attribute which seems to work perfectly for my needs.
.container {
font: 3rem sans-serif;
font-weight: bold;
text-transform: uppercase;
}
.highlight {
display: inline;
background: #fff;
color: #000;
padding: 5px 10px;
-webkit-box-decoration-break: clone;
-ms-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
outline: 0.4rem solid #000;
}
html,body {
background: #ccc;
text-align: left;
padding: 3%;
}<body>
<div class="container">
<p class="highlight">
I think I cracked<br>
it<br>
using the 'outline' css property, seems to do the trick
;-)
</p>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With