how can I add half round border inn after before of image-CodePudding

how can I add half round border inn after before of image here is both images I need a half round border on right corner how can I achieve this https://prnt.sc/1zdyyez https://prnt.sc/1zdyyez

CodePudding user response：

Are you sure thats not an image on the origin website? Otherwise I am not sure how to do it.

If you wanted curved borders then use the border-radius in your css.

What I mean: https://dabblet.com/gist/a89cbfd692275dca219ecb94ae95fb09

CodePudding user response：

You could use border-top-left-radius and border-top-right-radius properties to round the corners on the box according to the box's height (and added borders).

Then add a border to top/right/left sides of the box to achieve the effect.

Here you go:

.half-circle {
    width: 200px;
    height: 100px; /* as the half of the width */
    background-color: gold;
    border-top-left-radius: 110px;  /* 100px of height   10px of border */
    border-top-right-radius: 110px; /* 100px of height   10px of border */
    border: 10px solid gray;
    border-bottom: 0;
}