Skip to content

Esquinas Redondeadas Online

En el navegador — sin subida
Última verificación mayo 2026 — corre en tu navegador

Esquinas Redondeadas — Path Rect-Redondeado vía WHATWG Canvas ctx.quadraticCurveTo() × 4 + ctx.clip()

Añade esquinas redondeadas suaves a cualquier imagen al radio exacto que elijas (1-200 px ajustable vía deslizador) vía las primitivas de construcción de path del Canvas 2D Context del WHATWG: 4 llamadas a `ctx.quadraticCurveTo(cpx, cpy, x, y)` (según html.spec.whatwg.org/#dom-context-2d-quadraticcurveto) construyen un sub-path rectángulo-redondeado con curvas Bézier cuadráticas en cada esquina (punto de control en el vértice del rectángulo, extremos en las posiciones radio-offset a lo largo de los dos bordes adyacentes), después `ctx.clip()` (según html.spec.whatwg.org/#dom-context-2d-clip) sustituye la región de clip actual por la intersección de ese path rect-redondeado y la extensión del canvas. El `ctx.drawImage()` subsiguiente escribe píxeles solo dentro de la región de clip; las cuatro regiones de esquina fuera de la máscara redondeada quedan transparentes (alfa=0). La salida siempre es PNG (W3C 2ª Edición 10 de noviembre de 2003 / ISO/IEC 15948:2004 con alfa de 8 bits por píxel) — JPG pintaría las esquinas transparentes como fondo blanco o negro por la falta de canal alfa del JPEG baseline. El deslizador tiene debounce de 100 ms para evitar re-renderizados costosos durante el arrastre. Los archivos nunca salen del dispositivo.

Relacionado: Recorte Circular Añadir Borde Recortar Imagen Redimensionar Imagen Divisor de Cuadrícula Ampliador de Imágenes

Cómo redondear esquinas

  1. Arrastra tu imagen a la herramienta. JPG, PNG, WebP, AVIF — cualquier formato ráster común que el navegador decodifique nativamente funciona. Incluso los JPG de entrada producen un PNG transparente de salida (las esquinas redondeadas requieren alfa).
  2. Mueve el deslizador de radio. Valores pequeños (8-16 px) casan con estilos de tarjeta UI con CSS `border-radius` típicos; valores medios (18-22 px sobre ~1242 px ancho) casan con el estilo chamfer captura-app iOS; valores grandes (60-120 px) crean formas pill dramáticas; máx 200 px.
  3. La herramienta construye el path rect-redondeado vía 4 llamadas ctx.quadraticCurveTo() + ctx.clip(), después dibuja la imagen origen. Las esquinas fuera de la máscara redondeada quedan transparentes (alfa=0) en el canvas.
  4. Previsualiza el resultado contra el fondo de cuadros de transparencia para confirmar que las curvas de esquina se ven suaves y las regiones de esquina son transparentes. El deslizador tiene debounce de 100 ms — la vista previa se actualiza ~100 ms después de soltar el deslizador.
  5. Pulsa Descargar para guardar el PNG. El canal alfa de 8 bits mantiene las esquinas redondeadas transparentes donde sea que pegues la imagen. Los archivos nunca salen del dispositivo.

Casos de uso comunes

  • Producir capturas App Store con el radio de esquina estándar de la plataforma (~18-22 px en capturas iOS Marketing de 1242 px de ancho) sin abrir Sketch / Figma / Photoshop.
  • Redondear avatares y fotos de perfil antes de subirlos a plataformas — da control sobre el radio exacto en lugar de depender del recorte automático de la plataforma.
  • Preparar imágenes de tarjeta para web y páginas de aterrizaje para que el visual PNG case con el CSS `border-radius` de tus componentes tarjeta exactamente (8-16 px es típico para UIs de tarjeta modernas).
  • Suavizar fotos para slide decks y pitch decks donde el diseño circundante usa elementos redondeados y las fotos rectangulares duras chocan.
  • Crear imágenes con forma pill o de óvalo recortado para hero sections estableciendo radio cercano a min(width, height) / 2 — el rect-redondeado se aproxima a un óvalo cuando el radio se acerca a la mitad del lado más corto.

Preguntas frecuentes

¿Por qué la salida siempre es PNG?

Las esquinas redondeadas requieren canal alfa para renderizar las cuatro regiones de esquina como transparentes. JPG (ITU-T T.81 baseline / JFIF v1.02) no tiene canal alfa — las regiones de esquina que deberían ser transparentes pintarían como blanco puro (fondo JFIF por defecto) o cualquier color de relleno con el que se inicializó el canvas. PNG (W3C 2ª Edición 10 de noviembre de 2003 / ISO/IEC 15948:2004) preserva alfa de 8 bits por píxel byte-exacto vía `canvas.toBlob('image/png')`. Si necesitas una salida JPG con fondo sólido coloreado en lugar de transparencia, llena el canvas con el color de fondo antes de dibujar — pero la forma con esquinas redondeadas se convierte en apariencia rect-redondeado-coloreado-sobre-rectángulo-coloreado, ya no transparente.

¿Puedo usarlo sobre un PNG que ya es transparente?

Sí. La herramienta preserva cualquier canal alfa existente en el PNG origen y aplica la máscara rect-redondeada encima vía Canvas clip(). Los píxeles origen transparentes se quedan transparentes en la salida; la máscara redondeada solo afecta a las cuatro regiones de esquina. Nota que la operación clip() es multiplicativa sobre alfa: si un píxel origen tiene alfa=128 y cae dentro de la máscara redondeada, se queda alfa=128; si cae fuera de la máscara, se convierte en alfa=0.

¿Qué radio debería usar?

Para UIs casando con CSS-card, copia tu valor CSS `border-radius` (típicamente 8-16 px para tarjetas web modernas, 4-8 px para tarjetas más antiguas estilo Material). Para mockups captura-app iOS sobre canvas de 1242 px de ancho, 18-22 px aproxima el estilo chamfer iOS 7+ (el radio exacto del lock-screen/home-icon iOS varía por generación de dispositivo según las Human Interface Guidelines de Apple). Para formas dramáticas pill/óvalo, establece radio cercano a min(width, height) / 2 — el path rect-redondeado se aproxima a una elipse cuando radio → min(W,H)/2. El valor máximo del deslizador es 200 px.

¿Por qué quadraticCurveTo en lugar de arc?

Ambos funcionan para esquinas redondeadas. El `arcTo(x1, y1, x2, y2, radius)` del Canvas 2D Context también produciría arcos en cada esquina; `quadraticCurveTo(cpx, cpy, x, y)` usa una curva Bézier cuadrática con un punto de control. Los dos son visualmente casi idénticos a radios pequeños (≤30 px); a radios mayores la Bézier cuadrática se desvía ligeramente del cuarto-de-círculo perfecto que produciría un arco 90° verdadero, produciendo esquinas ligeramente más estilo 'squircle'. La implementación aquí usa quadraticCurveTo por elección del autor original de la herramienta; ambos paths definidos por la spec son válidos según WHATWG html.spec.whatwg.org.

¿Se modifica la imagen original?

No. La cadena decodificar + construir path ctx.quadraticCurveTo + ctx.clip + ctx.drawImage + toBlob('image/png') corre toda del lado cliente vía WHATWG Canvas sobre un canvas en-memoria nuevo; el archivo origen en disco nunca se modifica. La pestaña Network de DevTools muestra cero peticiones de subida durante la conversión.

Path rect-redondeado de 4 esquinas vía Canvas ctx.quadraticCurveTo() + ctx.clip() + salida PNG con alfa

La pipeline de round-corners construye el path rectángulo-redondeado vía las primitivas de construcción de path del Canvas 2D Context del WHATWG — 4 llamadas `quadraticCurveTo()` en las esquinas intercaladas con `lineTo()` a lo largo de los bordes rectos según html.spec.whatwg.org/#dom-context-2d-quadraticcurveto. La secuencia del path es: `beginPath()` → `moveTo(radius, 0)` (inicio borde superior, post-esquina) → `lineTo(width - radius, 0)` (fin borde superior, pre-esquina) → `quadraticCurveTo(width, 0, width, radius)` (esquina superior-derecha, control en el vértice superior-derecho del rectángulo, extremo de la curva radio píxeles abajo del borde derecho) → `lineTo(width, height - radius)` (borde derecho) → `quadraticCurveTo(width, height, width - radius, height)` (esquina inferior-derecha) → `lineTo(radius, height)` (borde inferior) → `quadraticCurveTo(0, height, 0, height - radius)` (esquina inferior-izquierda) → `lineTo(0, radius)` (borde izquierdo) → `quadraticCurveTo(0, 0, radius, 0)` (esquina superior-izquierda) → `closePath()`. Después `clip()` sustituye la región de clip actual por la intersección de este path rect-redondeado y la extensión del canvas según html.spec.whatwg.org/#dom-context-2d-clip. El `drawImage(source, 0, 0)` subsiguiente escribe la imagen origen al canvas; los píxeles dentro de la máscara rect-redondeada sobreviven, los píxeles en las cuatro regiones de esquina fuera de la máscara quedan con alfa=0 (el canvas se alocó nuevo con estado RGBA todo-cero). La salida es `canvas.toBlob('image/png')` según WHATWG — PNG preserva el canal alfa byte-exacto (W3C PNG 2ª Edición 10 de noviembre de 2003). JPG no está disponible porque el JPEG baseline (ITU-T T.81 1992) no tiene canal alfa — las regiones de esquina redondeadas pintarían como blanco por defecto JFIF (0xFFFFFF) o el color de relleno que sea. El control deslizador tiene debounce vía setTimeout 100 ms para colapsar eventos rápidos de arrastre en un solo re-renderizado. Valores de radio comunes: las UIs de tarjeta usan 8-16 px para casar con CSS `border-radius`; los maquetas de captura iOS usan 18-22 px sobre ~1242 px ancho para casar con el estilo chamfer iOS 7+; las formas pill / óvalo usan radio aproximándose a min(width, height) / 2 (≥100 px en dimensiones foto típicas).

  • Radio de esquina ajustable 1-200 píxeles vía deslizador (con debounce de 100 ms para colapsar eventos de arrastre)
  • Path WHATWG Canvas ctx.quadraticCurveTo() × 4 esquinas rect-redondeado según html.spec.whatwg.org/#dom-context-2d-quadraticcurveto con ctx.clip() según html.spec.whatwg.org/#dom-context-2d-clip
  • Salida PNG (W3C 2ª Edición 10 de noviembre de 2003 / ISO/IEC 15948:2004) con alfa de 8 bits por píxel — esquinas transparentes preservadas byte-exacto
  • Curvas Bézier cuadráticas en las esquinas (punto de control en el vértice del rectángulo, extremos radio-offset a lo largo de los dos bordes adyacentes) — más nítidas que un arco de 90° para el mismo radio
  • Borde de esquina con anti-aliasing del rasterizador del Canvas 2D Context (la spec deja la calidad del rasterizador implementación-definida; los navegadores modernos hacen anti-aliasing a precisión sub-píxel)
  • Preserva la resolución y los datos de color origen 1:1 — solo los píxeles en las cuatro regiones de esquina fuera de la máscara rect-redondeada se descartan
  • En el navegador vía WHATWG Canvas quadraticCurveTo + clip + drawImage + toBlob('image/png') — sin subida
  • Opera en sRGB (IEC 61966-2-1:1999); las imágenes origen sin perfil ICC embebido se interpretan como sRGB

Gratis. Sin registro. Sin subidas. Anuncios mediante AdSense (con consentimiento).

Fuentes (9)
  • WHATWG (live). HTML Living Standard — Canvas 2D Context: quadraticCurveTo(cpx, cpy, x, y). html.spec.whatwg.org/#dom-context-2d-quadraticcurveto — the rounded-corner path-building primitive: connects the last point in the current sub-path to (x, y) using a quadratic Bézier curve with control point (cpx, cpy); the round-corners tool calls quadraticCurveTo four times (one per corner) with control point at the rectangle's corner vertex and endpoints radius-offset along the two adjacent edges, interleaved with lineTo() calls along the straight edges.
  • WHATWG (live). HTML Living Standard — Canvas 2D Context: clip(). html.spec.whatwg.org/#dom-context-2d-clip — replaces the current clip region with the intersection of the current path and the canvas extent; subsequent drawImage writes pixels only inside the rounded-rect mask, leaving the four corner regions at the default RGBA all-zero (transparent) state.
  • WHATWG (live). HTML Living Standard — Canvas 2D Context: drawImage(). html.spec.whatwg.org/#dom-context-2d-drawimage — the 3-argument form drawImage(source, 0, 0) writes the source image at native dimensions to the canvas; pixels falling inside the clip region survive, pixels outside remain transparent.
  • W3C (PNG Working Group) (2003). Portable Network Graphics (PNG) Specification (Second Edition). W3C Recommendation 10 November 2003 / ISO/IEC 15948:2004 — the only output format that preserves the alpha channel byte-exactly (8-bit alpha per RGBA pixel); required for the transparent corner regions.
  • WHATWG (live). HTML Living Standard — HTMLCanvasElement.toBlob('image/png'). html.spec.whatwg.org/#dom-canvas-toblob — re-encodes the canvas pixel buffer to a PNG Blob with the alpha channel preserved.
  • WHATWG (live). HTML Living Standard — HTMLImageElement (browser-native raster decoding). html.spec.whatwg.org/#htmlimageelement — universal browser entry point for source raster format decode.
  • ITU-T (CCITT) Study Group VIII & ISO/IEC JTC 1/SC 29/WG 10 (JPEG) (1992). Information technology — Digital compression and coding of continuous-tone still images: Requirements and guidelines. ITU-T Recommendation T.81 (18 September 1992) / ISO/IEC 10918-1:1994 — JPEG baseline DCT bitstream; cited in the round-corners docs as the reason JPG output is unavailable (the baseline JPEG has no alpha channel for the rounded corner regions).
  • Hamilton, E. (C-Cube Microsystems) (1992). JPEG File Interchange Format (JFIF) Version 1.02. 1 September 1992 — JPEG container format; the baseline-JPEG JFIF v1.02 default-white background is what would render in place of the rounded corner regions if JPG were used as the output format.
  • International Electrotechnical Commission (IEC) (1999). Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB. IEC 61966-2-1:1999 — default 8-bit RGB colour space the Canvas 2D path operates in.

Son las especificaciones del W3C, ISO/IEC, ITU-T e IETF que la herramienta implementa o sobre las que se apoya. Localízalas en w3.org, iso.org, itu.int o datatracker.ietf.org.

Patrocinado

Por ·