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.

.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

Gelatin · Accepted Answer · 2013-12-31 19:03:15Z

2

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.

answered Dec 31, 2013 at 19:03

Gelatin

2,4231 gold badge25 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gelatin Over a year ago

Do you mean arranging things horizontally?

user2129623 Over a year ago

yes. without bootstrap css I got it done. I would like to see it using if someone can try

Ani · Accepted Answer · 2013-12-31 19:05:10Z

2

CSS

.circular {


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

answered Dec 31, 2013 at 19:05

Ani

4,5434 gold badges28 silver badges32 bronze badges

Comments

psdpainter · Accepted Answer · 2013-12-31 19:39:49Z

1

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; 
}

answered Dec 31, 2013 at 19:39

psdpainter

6661 gold badge11 silver badges28 bronze badges

Collectives™ on Stack Overflow

round shaped image using css

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related