Corner shape: Forma de esquinas

La propiedad corner-shape

La propiedad corner-shape nos permite ajustar la forma de las esquinas de un elemento. Para que corner-shape presente algún cambio, debes aplicar un border-radius específico, ya que de lo contrario estará a 0 y no habrá cambio en la esquina del elemento, que permanecerá cuadrada.

La propiedad a utilizar será la siguiente:

Observa el siguiente ejemplo, donde aplicamos el valor scoop (redondeo hacia dentro) a las cuatro esquinas del elemento:

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

<style>
  .box {
    width: 200px;
    height: 200px;
    background: indigo;
    border-radius: 50px;
    corner-shape: scoop;
  }
</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: corner-shape: valor, donde valor se aplica a cada esquina.
• 2️⃣ 2 parámetros: corner-shape: [top-left,bottom-right] [bottom-left,top-right].
• 3️⃣ 3 parámetros: corner-shape: [top-left] [bottom-right] [bottom-left,top-right].
• 4️⃣ 4 parámetros: corner-shape: [top-left] [top-right] [bottom-right] [bottom-left].

Los valores posibles

Las propiedades corner-shape y derivadas aceptan una amplia gama de opciones, produciendo una forma en la esquina del elemento determinada. Cada una de estas palabras clave es equivalente a un valor en la función superellipse() que veremos más adelante:

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);
}

Las propiedades individuales

Jugando con las propiedades individuales de corner-shape y border-radius, puedes combinarlas y utilizar diferentes valores para llegar a hacer cosas muy interesantes, como puedes comprobar en este ejemplo interactivo:

Tenemos propiedades individuales para dar esta forma sólo a una esquina concreta de nuestro elemento. Observa que no sólo tenemos la propiedad invididual tradicional, sino también una propiedad lógica individual:

En el siguiente ejemplo, modificamos las esquinas superior izquierda e inferior derecha, aplicando los valores bevel y scoop:

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

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

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. Dicha función acepta un parámetro numérico mediante el cuál definimos la cantidad de personalización de la esquina:

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})`;
}

De esta forma, puedes conseguir cualquier personalización de las palabras clave anterior e incluso ampliar o reducir la forma a tu propio gusto.