A border around block of text

user_1207950 0
Viewed 117

I want to achieve this:

enter image description here

When I'm using inline-block and add border I get this:

enter image description here

As you can see, the border is not flowing around the text but around the block.

Without inline-block I get this:

enter image description here

And now I don't have only one border around the text block.

Here is a playground with tailwindcss: enter link description here

I use tailwind to generate it fast but no need for tailwind whatsoever.

css html
1 Answers

You can approximate it using drop-shadow filter

p {
 font-size:18px;
}

span {
  background-color: lightblue;
  padding:1px 2px;
  filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 0px black) drop-shadow(0px 0px 0px black);
  
  /* the below is not mandatory but gives better result for padding */
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone; 
}
<p>Pie candy canes pie wafer pudding caramels. Sesame snaps biscuit candy sesame snaps sesame snaps liquorice bonbon candy canes. Brownie donut chocolate apple pie bear <span>law jelly beans brownie. Oat cake gummi bears candy dragée marshmallow biscuit carrot cake cake. Cheesecake tiramisu jelly liquorice carrot cake. Chocolate liquorice candy canes dragée chocolate bar. Biscuit oat cake toffee jujubes jelly beans. Cake candy halvah pudding cupcake shortbread marzipan cotton candy. Pie cheesecake gingerbread tart bonbon gummi bears chocolate. Tiramisu topping toffee lemon drops marshmallow dragée. Bear claw chocolate bar cotton candy bonbon lemon drops topping. Fruitcake gingerbread tart jelly-o cotton candy cotton candy</span> jelly cookie. Halvah chocolate bar halvah cake jelly-o jelly beans tootsie roll tiramisu powder. Marshmallow shortbread jelly-o pudding jelly beans macaroon.</p>

Or an SVG filter for better result:

p {
 font-size:18px;
}

span {
  background-color: lightblue;
  padding:1px 2px;
  filter: url(#inset);
  
  /* the below is not mandatory but gives better result for padding */
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone; 
}
<p>Pie candy canes pie wafer pudding caramels. Sesame snaps biscuit candy sesame snaps sesame snaps liquorice bonbon candy canes. Brownie donut chocolate apple pie bear <span>law jelly beans brownie. Oat cake gummi bears candy dragée marshmallow biscuit carrot cake cake. Cheesecake tiramisu jelly liquorice carrot cake. Chocolate liquorice candy canes dragée chocolate bar. Biscuit oat cake toffee jujubes jelly beans. Cake candy halvah pudding cupcake shortbread marzipan cotton candy. Pie cheesecake gingerbread tart bonbon gummi bears chocolate. Tiramisu topping toffee lemon drops marshmallow dragée. Bear claw chocolate bar cotton candy bonbon lemon drops topping. Fruitcake gingerbread tart jelly-o cotton candy cotton candy</span> jelly cookie. Halvah chocolate bar halvah cake jelly-o jelly beans tootsie roll tiramisu powder. Marshmallow shortbread jelly-o pudding jelly beans macaroon.</p>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>
    <filter id='inset' x='-50%' y='-50%' width='200%' height='200%'>
      <feFlood flood-color="red" result="outside-color"/>
      <feMorphology in="SourceAlpha" operator="dilate" radius="1"/>
      <feComposite in="outside-color" operator="in" result="outside-stroke"/>

      <feFlood flood-color="antiquewhite" result="inside-color"/>
      <feComposite in2="SourceAlpha" operator="in" result="inside-stroke"/>

      <feMorphology in="SourceAlpha" radius="0"/>
      <feComposite in="SourceGraphic" operator="in" result="fill-area"/>

      <feMerge>
        <feMergeNode in="outside-stroke"/>
        <feMergeNode in="inside-stroke"/>
        <feMergeNode in="fill-area"/>
      </feMerge>
    </filter>
  </defs>
</svg>

user_86203330
Related