Corner shape: Forma de bordes

Como vimos en el artículo anterior, los bordes de un elemento pueden redondearse utilizando la propiedad border-radius y sus propiedades individuales relacionadas. Sin embargo, la forma de la esquina puede ser más complicada de modificar, y para ello tenemos corner-shape.

La propiedad corner-shape

La propiedad corner-shape nos permite ajustar la forma de las esquinas de un elemento, ya sea una de ellas concretamente, o todas:

Para que corner-shape presente algún cambio, recuerda que debes aplicar un border-radius específico, ya que de lo contrario estará a cero y no hay cambio en la esquina del elemento, que será cuadrada.

Observa el siguiente ejemplo:

<div class="box"></div>

<style>
  .box {
    width: 200px;
    height: 200px;
    background: indigo;
    border-radius: 50px;
    corner-top-left-shape: bevel;
  }
</style>

Recuerda que la propiedad corner-shape, al igual que otras como border-radius, actua de atajo y se puede indicar parámetros variables:

• 1️⃣ 1 párametro: Se aplica a cada esquina.
• 2️⃣ 2 parámetros: El primero, a las esquinas de la diagonal principal \. El segundo, a la inversa /.
• 3️⃣ 3 parámetros: El primero, esquina superior-izquierda, y el segundo, esquina inferior-derecha, el tercero a la diagonal inversa /.
• 4️⃣ 4 parámetros: Desde la esquina superior-izquierda en el sentido de las agujas del reloj.

Valores posibles

Las propiedades corner-shape y derivadas aceptan una amplia gama de opciones, produciendo una forma en la esquina del elemento determinada:

Veamos unos ejemplos para entender como funcionan las palabras clave:

<select class="corner-shape">
  <option selected>round</option>
  <option>scoop</option>
  <option>bevel</option>
  <option>notch</option>
  <option>squircle</option>
  <option>straight</option>
</select>
<input class="border-radius" type="range" value="50" min="0" max="100">
<output>50px</output>

<div class="box"></div>

<style>
  .box {
    width: 200px;
    height: 200px;
    background: indigo;
    border-radius: var(--border-radius, 50px);
    corner-shape: var(--corner-shape, round);
  }
</style>

const box = document.querySelector(".box");
const cornerShape = document.querySelector(".corner-shape");
const borderRadius = document.querySelector(".border-radius");
const output = document.querySelector("output");

cornerShape.addEventListener("input", () => update());
borderRadius.addEventListener("input", () => update());

const update = () => {
  box.style.setProperty("--border-radius", borderRadius.value + "px");
  output.textContent = borderRadius.value + "px";
  box.style.setProperty("--corner-shape", cornerShape.options[cornerShape.selectedIndex].value);
}

La función superellipse()

Si los valores anteriores se nos quedan cortos, tenemos la posibilidad de utilizar la función CSS superellipse(), que nos permite utilizar valores personalizados más ajustado a nuestros casos.

Observa el siguiente ejemplo:

<input class="border-radius" type="range" value="50" min="0" max="100">
<output>50px</output>

<input class="superellipse" type="range" value="0" min="0" max="10" step="0.1">
<output>0</output>

<div class="box"></div>

<style>
  .box {
    width: 200px;
    height: 200px;
    background: indigo;
    border-radius: var(--border-radius, 50px);
    corner-shape: superellipse(var(--superellipse, 0));
  }
</style>

const box = document.querySelector(".box");
const superEllipse = document.querySelector(".superellipse");
const borderRadius = document.querySelector(".border-radius");
const seOutput = document.querySelector(".superellipse + output");
const brOutput = document.querySelector(".border-radius + output");

superEllipse.addEventListener("input", () => update());
borderRadius.addEventListener("input", () => update());

const update = () => {
  box.style.setProperty("--border-radius", borderRadius.value + "px");
  brOutput.textContent = borderRadius.value + "px";
  box.style.setProperty("--superellipse", superEllipse.value);
  seOutput.textContent = `superellipse(${superEllipse.value})`;
}