Generador de círculos CSS: 50% de radio de borde
Diseñe visualmente el radio del borde de CSS: cuatro controles deslizantes de esquina independientes en px o porcentaje, un atajo de enlace en todas las esquinas para círculos y píldoras instantáneos, además de un modo de burbuja orgánica con formas aleatorias.
Resultado
Esta página abre el generador de radio de borde con las cuatro esquinas vinculadas y configuradas al 50%, el valor que convierte un cuadro en un círculo usando nada más que CSS. Honestamente: en una caja cuadrada esto forma un círculo perfecto, pero en una caja rectangular el mismo 50% produce una elipse similar a la de un estadio, ya que cada esquina solo redondea su propio cuarto.
Esa distinción es importante porque un radio de borde del 50% es la forma más común de crear avatares circulares, insignias de íconos y puntos de estado en CSS, mucho más simple que recortar un círculo con una máscara o dibujar uno en SVG, y se mantiene nítido en cualquier tamaño ya que es un porcentaje relativo, no un radio de píxel fijo.
Cambie el cuadro a un tamaño cuadrado fijo en su propio CSS para bloquear el círculo perfecto, o déjelo rectangular a propósito para darle forma de píldora; de cualquier manera, las esquinas permanecen vinculadas aquí para que un solo control deslizante mantenga los cuatro sincronizados mientras copia el CSS resultante.