KKS-20 — Shape, mask and radius options
Open any element’s Appearance tab and look at Frame Options: there is now a second, collapsible panel headed »Shape, mask and radius«. TYPO3 v13’s SelectCheckBoxElement renders each TCA itemGroup as its own panel, so this is a real separation from bootstrap-package’s ruler and indent options rather than a relabelling.
The group holds:
| Value | Class | What it does |
|---|---|---|
radius-bottom-left | .frame-option-radius-bottom-left | New. Rounded bottom-left corner, 50px at xl stepping to 16px |
vector | .frame-option-vector | KKS-14’s decorative circle, moved into this group |
The AGR image masks mask-left / mask-right were briefly offered here and have been withdrawn: their diagonal mask-image clip is AGR’s design language, and KKSN rounds corners at 30px instead. The old SCSS in _gallery.scss is left untouched but is no longer reachable from the backend.
Radius on the image
Text left, image right, radius-bottom-left ticked — the case the Figma file comments on (»text (left) image (right) with frame option for css image border radius«). The rounding lands on .imageframe img, which is the same hook the two mask options use, so all three options in this group target the same element.
Measure it: getComputedStyle(document.querySelector('#c92010 .imageframe img')).borderBottomLeftRadius is 50px at xl and steps to 40 / 30 / 24 / 16 as the viewport narrows; the other three corners stay 0px.
The radius steps because a flat value gets proportionally rounder as the image shrinks — measured, a fixed 50px is 3.1× rounder on a phone than on desktop. Each step holds Figma’s 4.63 %-of-image-width ratio within 4 %.
Control — no option
Identical element with nothing ticked. All four corners square, which is the project default: every Bootstrap radius token in _variables.scss is deliberately 0 — the design is square except for pills. That is exactly why the radius is its own $frame-option-corner-radius-scaling map and not a change to $border-radius, which would have rounded cards, alerts, tabs, inputs and the accordion as a side effect.
Radius on the frame box
No image here, so the same option rounds the frame’s own box instead — Kostas’ call was “both, whichever the element has”. On a gradient the corner is visible because border-radius clips a background box on its own; no overflow: hidden is required for that.
Look at the bottom-left corner of this orange panel.
Radius plus the KKS-14 vector
Both ticked. This is the combination that needed thinking about: the decorative vector is painted by a ::before, which is a positioned child, and a parent’s border-radius does not clip positioned children — so without help the vector would square the rounded corner straight off again.
So overflow: hidden is applied only when a radius option and a vector option are both present, rather than unconditionally on every rounded frame. Check the bottom-left corner: the orange shape should follow the curve, not overrun it.