CSS right side of div curved (example image provided)

Question

I am trying to do this with CSS on a div (not an image just a div with a background colour):

If you see the example image above and look on the right, that's what I need to do, without an image.

How can I do this with css?

Try using an inner shadow in the box-shadow property. Does that serve your purpose? — imperial-lord
– imperial-lord, Commented Jun 15, 2021 at 10:43

Alvie Mahmud · Accepted Answer · 2021-06-15 10:56:09Z

1

Using a box shadow with an inset seems to achieve this (it is widely supported by most browsers: https://caniuse.com/mdn-css_properties_box-shadow_inset). You can also add border-top-right-radius and border-bottom-right-radius to give the corners a curve too.

.grey-box {
    background: #ccc;
    height: 200px;
    width: 200px
}

.right-curve-shadow {
    box-shadow: inset -20px 0 15px -15px rgba(50, 50, 50, 0.5);
}

.right-side-radius {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

<div class="grey-box right-curve-shadow right-side-radius">
</div>

You can play around with the colour ( rgba(50, 50, 50, 0.5) to another value ) and also with the offsets / spread of the box shadow.

See here for more information: How to create a inset box-shadow only on one side?

answered Jun 15, 2021 at 10:56

Alvie Mahmud

1941 silver badge12 bronze badges

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

Collectives™ on Stack Overflow

CSS right side of div curved (example image provided)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related