round shaped image using css

Question

Here I created the image with round shape. But it covers all corners. I want affect only in left corners.

CODEPEN: CODEPEN DEMO

.circular {

    border-radius: 5px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(http://link-to-your/image.jpg) no-repeat;
    }

I appreciate if some one can improve this to display it similar to image in the CODEPEN. circular class is in bottom of css section

also needs help in positioning two labels

Answer 1

You can make specific corners round by using border-top-left-radius, border-top-right-radius, border-bottom-left-radius and border-bottom-right-radius.

Answer 2

CSS

.circular {


   border:5px solid;
   border-top-left-radius:150px;
   background: url(http://link-to-your/image.jpg) no-repeat;
}

Answer 3

You can shorthand your css to a one-liner as well. Just remember, the border order in shorthand goes:

top left, top right, bottom right, bottom left

So if you want to control a specific border, do this:

.circular { 
    border-radius: 150px 0 0 150px; 
    background: url("image path") no-repeat; 
}