Rounded Left Side CSS [closed]

Answer 1

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">

Answer 2

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: #ffffd;
  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>

Answer 3

You can create a curve on your image by using border radius:

.container {
  display: inline-block;
  background-color: #cccccc;
  padding-left:20px;
}

.container img {
   border-radius: 75% 0 0 75%;
   display:block;
}

<div class="container">
    <img src="http://lorempixel.com/300/800/sports/1/">
</div>