[svgwg] Feature Request: Support for per-corner border radius in <rect> (like border-top-left-radius) (#980)

karas-naeem has just created a new issue for https://github.com/w3c/svgwg:

== Feature Request: Support for per-corner border radius in <rect> (like border-top-left-radius) ==
## Feature request: Add ability to round individual corners in SVG <rect>

### Summary
Currently, the `<rect>` element in SVG supports rounded corners only via `rx` and `ry`, which apply the same radius to all four corners.

This limits the flexibility for designers and developers who want to round **only specific corners**, like just the left side (as possible in CSS with `border-top-left-radius`, etc).

### Why is this important?
- Improves design flexibility.
- Makes SVG easier to use without falling back to `<path>`, especially for learners and visual tools.
- Matches existing behavior in CSS, making SVG more consistent with the web platform.

### Proposed solution
Support per-corner control for `<rect>`, for example:

- **Option 1**: New attributes like:
  - `rx-top-left`, `rx-top-right`, `rx-bottom-left`, `rx-bottom-right`
  - And same for `ry-*` if vertical radii differ

- **Option 2**: CSS-style shorthand (space-separated):
  ```html
  <rect x="10" y="10" width="200" height="100"
        rx="10 0 0 10"
        ry="10 0 0 10"
        fill="skyblue" />
### Use case
I want to create a <rect> that has only the left corners rounded, and the right corners sharp, like a speech bubble or chat UI block — without needing to write complex <path> code.

### Bonus idea
Consider allowing full border-radius styling via inline CSS when using SVG in HTML documents:
    <rect style="border-radius: 10px 0 0 10px;" />
Thank you for considering this feature!

Please view or discuss this issue at https://github.com/w3c/svgwg/issues/980 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 8 June 2025 16:45:19 UTC