Multi line padded text with outer and inner rounded corners in CSS

Question

I would like to create multi line padded text with outer and inner rounded corners in CSS, as seen in the image below. There are many solutions for outer corners, but inner corners (marked with red arrows in the image) seems much more complicated. Perhaps there needs to be some javascript?

Answer 1

I recently created a library called react-rounded-border that might help with this. It simplifies creating multiline text with both outer and inner rounded corners, just like in your example. Feel free to check it out!

https://github.com/Karo8870/react-rounded-border

Here's an example, you just need to wrap everything inside a and then everything you actually want to include inside the border into (or in your case).

Here's your example:

import { RoundedBorder, RoundedTextBorder, IncludeBorder } from 'react-rounded-border';

export default function () {
    return (
        <main className='w-screen h-screen bg-black dark flex flex-col'>
            <RoundedBorder
                className='flex flex-col items-end p-20'
                paddingTop={4}
                paddingBottom={8}
                paddingLeft={12}
                paddingRight={12}
                borderRadius={16}
            >
                <RoundedTextBorder className='font-semibold text-black text-3xl w-[250px] text-right'>
                    How to create this type of text with round corner radius
                </RoundedTextBorder>
            </RoundedBorder>
        </main>
    );
}

Answer 2

The code from https://stackoverflow.com/users/6400719/ines-montani is the best solution for doing this. Unfotunately transparency didn't worked out of the box in this Example: https://codepen.io/ines/pen/NXbmRO

I slightly modified the svg filter:

You can adjust the opacity in <feFuncA type="linear" slope="0.5" />.

:root {
  --color-bg: #34304c;
  --color-bg2: #534d7a;
  --color-highlight: #000;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body {
  background: url("https://www.robotron-daphne.de/fileadmin/Daphne/Bilder/slide_1_ot.jpg");
  /* path to your banner */
}

.goo {
  display: block;
  filter: url('#rounded-box-filter');
}

.goo p {
  font-size: 2rem;
  color: #fff;
  line-height: 1.0;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: var(--color-highlight);
  padding: 0rem 1rem;
  margin: 0;
}

#l2 {
  margin-left: 50px;
  filter: image;
}

.goo:focus {
  outline: 0;
}

.edit {
  display: inline;
  padding: 0.5rem 1rem;
  background: var(--color-bg2);
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--color-highlight);
  border-radius: 1em;
}

body {
  padding: 7.5vh 100px 0 100px;
  font-family: var(--font);
}

<div class="edit">Edit text below</div>

<h1>
  <div class="goo" contenteditable="true">
    <div>
      <p>This is an example of a simple headline or text with rounded corners using</p>
    </div>
    <div>
      <p id=l2>a gooey SVG filter.</p>
    </div>
  </div>
</h1>

<svg style="visibility: hidden; position: absolute;" width="0" height="0">
  <defs>
    <filter id="rounded-box-filter">
      <!--  blur the shape of the text-background and remove the blur with colorMatrix again to create box-shape with round corners  -->
      <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur" />
      <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="box-shape" />

      <feComponentTransfer in="box-shape" result="transparent">
        <feFuncA type="linear" slope="0.5" />
      </feComponentTransfer>
      <!-- extract white text by removing black background  -->
      <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0   0 1 0 0 0   0 0 1 0 0  3 -1 -1 0 0" result="text"/>
      <!--  put white text over the created box  -->
      <feComposite in="text" in2="transparent" operator="over"/>
    </filter>
  </defs>
</svg>

Codepen

Answer 3

This is, for me, a really good answer. Code by https://stackoverflow.com/users/6400719/ines-montani

HTML:

<div class="edit">Edit text below</div>

<h1>
    <div class="goo" contenteditable="true">This is an example of a simple headline or text with rounded corners using<br>a gooey SVG filter.</div>
</h1>

<!-- Filter: https://css-tricks.com/gooey-effect/ -->
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

CSS:

:root {
    --color-bg: #34304c;
    --color-bg2: #534d7a;
    --color-highlight: #fff;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.goo {
    font-size: 3rem;
    line-height: 1.35;
    display: inline;
    box-decoration-break: clone;
    background: var(--color-highlight);
    padding: 0.5rem 1rem;
    filter: url('#goo');
}

.goo:focus {
    outline: 0;
}

.edit {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--color-bg2);
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--color-highlight);
    border-radius: 1em;
}

body {
    padding: 7.5vh 100px 0 100px;
    font-family: var(--font);
    background: var(--color-bg);
}

Link to Codepen: https://codepen.io/ines/pen/NXbmRO