Search code examples
cssfigma

Is it possible to make a border-radius behave like in figma

Is it possible to make css behave like in figma, its hard for me to describe but basically the border radius would go past the middle point.

Css doesn't behave like that when i tell him border-radius: 0px 50px 50px 50px; it stops at the middle and squares the top left, is there a way to force css to behave like the image

figma behaviour

the code i guess

html:

<div class="decoracaoInfo1" id="decoracaoInfo1"> </div>

css:

.decoracaoInfo1{
    width: 397px;
    height: 25px;
    background: rgba(53, 92, 175, 0.6);
    border: 1px solid rgba(53, 92, 175, 0.0); 
    border-radius: 50px;/*0px 100px 100px 100px;*/
    border-top-left-radius: 0px !important;
    z-index:5;
    position: absolute;
}
Solution

  • The order of border-radius definition is the key to get the desired shape. The shorthand is applied top-left to bottom-left, clockwise.

    .shape {
    width: 397px;
    height: 25px;
    background-color: rgba(53, 92, 175, 0.6);
    border-radius: 0 12.5px 12.5px 25px;
}
    <div class="shape"></div>