What CSS properties for specific background?

Question

I’m trying to draw a button. I want a background similar to the image below. I started using the border-Radius property, but without success.

[css]

 .btn-criar{
                height: 50%;
                min-width: 60px;
                max-width: 100px;
                width: 80px;
                background-color: gray;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%,-50%);
                -ms-transform: translate(-50%,-50%);
                border-style: solid;
                border-color: blue;
                border-width: 3px;
                border-radius: 50%; 

            }

[HTML]

<div class="row btn-criar">
                        <div class="col-md-6">
                            <div class="row">
                                <i class="btn-icon-criar fa fa-plus" aria-hidden="true"></i>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                <span class="btn-texto-criar">Criar</span>
                            </div>
                        </div>
                    </div>

Can you help me?

Answer 1

What happens is that vc does not have an element that is a square, but a rectangle, it causes the axis of curvature to be ellipse-shaped and not circle-shaped, since half the width is not equal to half the height. Then put border-radius: 50%; will not look as expected.

To fix this you will have to put a fixed height value to your button, and then yes use the border-radius at half the height.

Look at this idea in your code, I put the button height on 30px, soon the border-radius gets 15px, half the height. So you need the same value on the X and Y axis so you need a fixed value corresponding to the smallest side that in the case is the height.

As you can see in the image below the 50% de X é maior que 50% de Y so it was becoming one elipse...

EDIT: to speed up creating a variable in the CSS to set the button height and in the border-radius I shared that one var() by 2 with a calc() guys like that: border-radius: calc(var(--altura) / 2);

:root {
   --altura: 30px;
  }
 .btn-criar{
    height: var(--altura);
    min-width: 60px;
    max-width: 100px;
    width: 80px;
    background-color: gray;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    border-style: solid;
    border-color: blue;
    border-width: 3px;
    border-radius: calc(var(--altura) / 2);
  } 

<br>
<br>
<br>

<div class="row btn-criar">
    <div class="col-md-6">
        <div class="row">
            <i class="btn-icon-criar fa fa-plus" aria-hidden="true"></i>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row">
            <span class="btn-texto-criar">Criar</span>
        </div>
    </div>
</div>

You can read more about this property here: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

OBS: By the classes you are using saw that you are using Bootstrap, but by the organization of your grid very likely you will have problem with this in the future, stay tuned in the documentation of Bootstrap....