Rounded Left Side CSS
You can use border-radius
only 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>
This should be as simple as applying border-radius to one side of your image, playing with the values and image size to get the effect you require:
img {border-radius: 250px 0px 0px 250px; }
<img src="http://placehold.it/300x500">
More complex curves
Additionally you can get involved with more complex curves like this:
img {
border-top-left-radius: 100px 200px;
border-bottom-left-radius: 100px 200px;
}
<img src="http://placehold.it/100x300">