To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

What you want is a simplified version of the reverse problem from here https://www.reddit.com/r/css/comments/1ojp1da/comment/nm589sd/ only with a border, which I'd recreate like for these tabs https://codepen.io/thebabydino/pen/oNKLLbv

This doesn't require putting each line in an element, it allows the text to reflow naturally with viewport/ container resize and it doesn't risk running into weird alignment issues as it can happen when it's made out of multiple parts.

It's actually pretty simple if you don't want a transparent background. Which doesn't seem to be the case in your image.

Edit: quickly coded a very rough example https://codepen.io/thebabydino/pen/yyeRNww

https://preview.redd.it/66xy4kvi4hyf1.png?width=687&format=png&auto=webp&s=36d7bcf32a7f708f882219be7aaaa380f74bad93

This has to be the worst way to screenshot what you actually want.

https://jsfiddle.net/azbuco/mw6frdp7/

Here you can see the steps, how i would create this effect

Ah just to be clear, you want the multi line item to have a nice smoothed background that fits the text. Like a sticker.