ARTICLE AD BOX
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?):
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?
