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, Jun 15 '21 at 10:43

score 1 · Accepted Answer · answered Jun 15 '21 at 10:56

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?

CSS right side of div curved (example image provided)

1 Answers1