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
.
round shaped image using css
-
23-09-2022 - |
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
Solution
OTHER TIPS
CSS
.circular {
border:5px solid;
border-top-left-radius:150px;
background: url(http://link-to-your/image.jpg) no-repeat;
}
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;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow