Rounded Left Side CSS [closed]

Question

I'm currently trying to achieve the following effect with CSS, unfortunately my efforts have failed trying to modify code to get this even mildly right.

Any help would be greatly appreciated.

Answer 1

You can use border-radiusonly on the two left corners and combine two values each, as in this example (you have to try around a bit to find a good combination):

.outer {
  width: 500px;
  background-color: #ddd;
  overflow: auto;
}
.outer img {
  float: right;
  border-top-left-radius: 30px 50%;
  border-bottom-left-radius: 30px 50%;
}

<div class="outer">
  <img src="http://placehold.it/200x400/fb3">
</div>