Rounded Left Side CSS

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>


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

Tags:

Html

Css

Recent Posts