How to achieve perfect parallel border radius in multiple squared boxes with CSS

Question

I want to achieve the following:

A button made with pure CSS
Which has a border with rounded corners
Which will have gradient color for the border and the text when hovered

I managed the following so far:

(Following screenshots are 300% zoomed)

Description:

A parent (the button itself): has a grey background and a padding [1]
A box inside the parent: has a white background [2]
A box inside the box: contains the text and uses background-clip: text for text gradient on hover

The issue is happening between the elements [1] and [2].

[1] is the container with background and padding and border radius. [2] is the inside box with another background and the same border radius as the parent.

The corners are messy, instead of nice.

I cannot just make a real border with the border property because that won't allow me to create the gradient effect on hover.

.boton-contorno {
  display: inline-block;
  border: none;
  outline: none;
  padding: 2px;
  background-color: var(--gris-fuerte);
  color: var(--gris-fuerte);
  border-radius: 8px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 800;
  white-space: pre;
}

.boton-contorno span {
  display: inline-block;
  background-color: var(--blanco);
  padding: 0.5rem 1.3rem;
  border-radius: 8px;
  pointer-events: none;
}

.boton-contorno span strong {
  font-weight: 800;
  font-size: 1rem;
  pointer-events: none;
}

.boton-contorno:hover {
  background: linear-gradient(-45deg, var(--gris-fuerte), var(--morado));
}

.boton-contorno:hover span strong {
  background: linear-gradient(-45deg, var(--gris-fuerte), var(--morado));
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

<a href="#" class="boton-contorno">
  <span>
     <strong>¡Ve al plan!</strong>
  </span>
</a>

@ManasKhandelwal: This is no duplicate, since the question is not about the gradient, but the two different border-radius'! — biberman, Mar 28 '21 at 12:43
Oh, sorry. Do you know where i can report the duplicate-mistake? — biberman, Mar 28 '21 at 12:47

biberman · Accepted Answer · 2021-07-07T21:03:56.537

the inner border-radius should be 6px because the padding is 2px

Working example (colors are a bit different):

.boton-contorno {
  display: inline-block;
  padding: 2px;
  border-radius: 8px;
  background-color: #666;
  cursor: pointer;
}

.boton-contorno span {
  display: inline-block;
  padding: 0.5rem 1.3rem;
  border-radius: 6px;
  background-color: white;
}

.boton-contorno span strong {
  font-size: 1rem;
  font-weight: 800;
  color: #666;
}

.boton-contorno:hover {
  background: linear-gradient(-45deg, #666, violet);
}

.boton-contorno:hover span strong {
  background: linear-gradient(-45deg, #666, violet);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

<div class="boton-contorno">
    <span>
      <strong>iVE AL PLAN!</strong>
    </span>
</div>

This has been a huge help. I now realize the stupidity I have been doing with setting the same radius for both of them and expecting it to work. Thanks a lot for your help. — Álvaro Franz, Mar 28 '21 at 12:47

How to achieve perfect parallel border radius in multiple squared boxes with CSS

1 Answers1