CSS Beijing (Snapshot 2007)
CSS Device Adaptation
CSS Line Grid
CSS Mobile Profile 1.0 & 2.0
CSS Multi-Column Layout
CSS Round Display
CSS3 Backgrounds and Borders
CSS3 Basic UI
CSS3 Box Alignment Module
CSS3 Generated Content
CSS3 Image Values
CSS3 Paged Media
CSS3 Template Layout
CSS3 Values and Units
CSS3 Writing Modes
CSS4 Backgrounds and Borders
CSS4 Values and Units
Generated Content for Paged Media
Selectors Level 3
Selectors Level 4
Tab Atkins Jr.
Benjamin De Cock
Dongwoo Joshua Im
Raphael Kubo da Costa
Philippe Le Hégaret
Nathalia Sautchuk Patrício
Leif Arne Storset
The interaction of the border-image property
and the border-radius property
is unclear. Designers will expect to be able to use these two together with a defined effect, and ideally, be able to use them to create a useful effect.
Currently, the spec offers the following clues:
"Backgrounds, but not the border-image, are clipped to the appropriate curve "
"All border styles (â€˜solidâ€™, â€˜dottedâ€™, â€˜insetâ€™, etc.) follow the curve of the border. "
ok so at least they can be used together. So the corner image is used, then clipped to the curve? What about the part on the inside of the curve - is the central part of the image used here?
"When two adjoining borders are of different thicknesses the corner will show a smooth transition between the thicker and thinner borders"
Does that still apply when images are used for the borders? (Could argue it either way, spec is unclear)
"The corner images are scaled to be as wide and as tall as the two border-image edges they are part of. "
This seems to imply that border-radius has no effect here. Should it?
There are various ways to clarify this interaction.
A) Some are simple but would be unfortunate (e.g. "use of border-image causes border-radius to be ignored" or "use of border-radius causes border-image to be ignored").
B) Some would give a defined, but ugly and non-useful effect (lay out border-image as currently defined, i.e. assuming border-radius is zero, then apply border-radius as a clip, which will probably remove most of the corners or indeed all the corner and some of the sides, giving a discontinuous border).
C) Some would be unfeasibly complex (perform a non-affine path warp operation on the resulting image so that it stretches along the curved borders).
D) Some would take a bit more spec work, but would provide a combination that content authors can use to generate useful results. If the same designer is specifying both the image and the radius, it should be possible to create an image that is designed to work with a particular border radius and look good.
I could live with a type B) solution but would be happier with a type D) solution that gives attractive and useful results for the case where the designer specifies both a radius and a border image designed for that radius, and defined but possibly ugly type B) results for random combinations.
The spec could use an extra diagram or two to explain the stretching and to clarify that the border image goes outside but not inside the border (which I think is what the current spec assumes). The lack of image coverage inside the border position bites when rounded corners are used.
Add notes (no markup allowed, URIs get automatically hyperlinked):
Spec should be clear that border-radius has no effect on border-image and vice versa.
border-image and border-radius do not interact. This should be clear enough already.