How to create a custom curved border shape with gradient stroke around a div
01:19 03 Dec 2025

I need to create a container that has a custom border shape- specifically a curved “bump” on the left side — and the border must use a linear gradient (not a solid color). The shape should look like this:

(attach your uploaded screenshot here)

The main problem is that standard CSS borders are always rectangular, and clip-path: polygon() only supports straight edges (no curves), so I can’t reproduce that smooth curved indentation.

Here is a minimal example showing what I want inside the shape:

I tried using border-radius & pseudo-elements but couldn’t figure out how to apply a gradient stroke along a custom curvy path.

Here is a rough version I built using SVG (if this approach is correct, how do I improve responsiveness?):

Box with gradient border having curv in middle of border

What’s the correct and modern way to wrap HTML content inside a custom curved gradient border shape like this? Can the SVG be made responsive while keeping the shape and gradient aligned properly?

.bubble {
            --border: 2px;
            --radius: 24px;
            --gradient: linear-gradient(90deg, #3cabff, #ff83f0);
            padding: 16px 22px;
            border-radius: var(--radius);
            background: white;
            position: relative;
            background:
                var(--gradient) border-box,
                white padding-box;
            border: var(--border) solid transparent;
            mask:
                linear-gradient(#fff 0 0) padding-box,
                linear-gradient(#fff 0 0);
            mask-composite: exclude;
        }

        .bubble::after {
            content: "";
            position: absolute;
            right: -14px;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            border-radius: 0 50% 50% 0 / 50%;
            background:
                var(--gradient) border-box,
                white padding-box;
            border: var(--border) solid transparent;
            mask:
                linear-gradient(#fff 0 0) padding-box,
                linear-gradient(#fff 0 0);
            mask-composite: exclude;
        }

        

            Your text here...

html css svg