ISSUE-108: image and radius interaction unclear.

image-radius

image and radius interaction unclear.

State:
CLOSED
Product:
CSS3 Backgrounds and Borders
Raised by:
Chris Lilley
Opened on:
2009-05-26
Description:
The interaction of the border-image property
http://dev.w3.org/csswg/css3-background/#the-border-image-property
and the border-radius property
http://dev.w3.org/csswg/css3-background/#the-border-radius
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.
Related Actions Items:
No related actions
Related emails:
  1. [CSSWG] Minutes and Resolutions Telecon 2009-05-27 (from fantasai.lists@inkedblade.net on 2009-06-08)
  2. Agenda conf call 27-may-2009 (from daniel.glazman@disruptive-innovations.com on 2009-05-26)
  3. ISSUE-108 (image-radius): image and radius interaction unclear. [CSS3 Backgrounds and Borders] (from sysbot+tracker@w3.org on 2009-05-26)

Related notes:

Spec should be clear that border-radius has no effect on border-image and vice versa.

Elika Etemad, 27 May 2009, 23:06:34

border-image and border-radius do not interact. This should be clear enough already.

Elika Etemad, 9 Jun 2009, 19:09:05

Changelog:

Created issue 'image and radius interaction unclear.' nickname image-radius owned by Chris Lilley on product CSS3 Backgrounds and Borders, description 'The interaction of the border-image property
http://dev.w3.org/csswg/css3-background/#the-border-image-property
and the border-radius property
http://dev.w3.org/csswg/css3-background/#the-border-radius
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.' non-public

Chris Lilley, 26 May 2009, 13:49:19

Status changed to 'closed'

Elika Etemad, 9 Jun 2009, 19:09:05


Peter Linss <peter.linss@hp.com>, Daniel Glazman <daniel.glazman@disruptive-innovations.com>, Chairs, Chris Lilley <chris@w3.org>, Bert Bos <bert@w3.org>, Staff Contacts
Tracker: documentation, (configuration for this group), originally developed by Dean Jackson, is developed and maintained by the Systems Team <w3t-sys@w3.org>.
$Id: index.php,v 1.323 2013-12-19 14:47:09 dom Exp $