How to give custom shape border effect using css

Question

Please have a look at the image. There is a black border in right side with text inside. How can I get this in css?

Mark Knol · Accepted Answer · 2018-01-22 19:29:17Z

1

I would say use svg for this, use svg as background of container div, give content lot of margin top/left/right to make it fit.

Btw this design is most likely not gonna work on mobile so you have to figure out a decent alternative for that.

answered Jan 22, 2018 at 19:29

Mark Knol

10.3k3 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ScoobyDam · Accepted Answer · 2018-01-22 18:56:33Z

0

Here is a great website with weird CSS hard div: https://css-tricks.com/examples/ShapesOfCSS/

You'll see they did an egg, then you can modify the egg shape to try to get a similar shape like on the picture.

What you need to do is create a div with a class, then modify the div's shape and had a border on it.

answered Jan 22, 2018 at 18:56

ScoobyDam

3793 silver badges13 bronze badges