ISSUE-108: image and radius interaction unclear.


image and radius interaction unclear.

CSS3 Backgrounds and Borders
Raised by:
Chris Lilley
Opened on:
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.
Related Actions Items:
No related actions
Related emails:
  1. Minutes Berlin F2F 2018-04-11 Part III: CSS Scroll Snap, CSS Text 3 [css-scroll-snap] [css-text-3] (from on 2018-05-17)
  2. [csswg] Agenda conf call 26-Oct-2016 (from on 2016-10-26)
  3. Proposed Agenda for Oct 26, 2016 (from on 2016-10-25)
  4. [csswg] Agenda conf call 19-Oct-2016 (from on 2016-10-19)
  5. Proposed Agenda (from on 2016-10-18)
  6. Re: Proposed Agenda (from on 2016-10-12)
  7. RE: Proposed Agenda (from on 2016-10-12)
  8. Re: Proposed Agenda (from on 2016-10-12)
  9. Re: Proposed Agenda (from on 2016-10-11)
  10. Proposed Agenda (from on 2016-10-11)
  11. Re: Proposed Agenda (from on 2016-10-10)
  12. [CSSWG] Minutes Telecon 2016-10-05 [css-overflow] [css-grid] [css-text] (from on 2016-10-05)
  13. RE: [csswg] Agenda conf call 5-Oct-2016 (from on 2016-10-05)
  14. [csswg] Agenda conf call 5-Oct-2016 (from on 2016-10-05)
  15. Proposed agenda (from on 2016-10-04)
  16. [css-text] Agenda+ Open Issues (from on 2016-09-24)
  17. [CSSWG] Minutes and Resolutions Telecon 2009-05-27 (from on 2009-06-08)
  18. Agenda conf call 27-may-2009 (from on 2009-05-26)
  19. ISSUE-108 (image-radius): image and radius interaction unclear. [CSS3 Backgrounds and Borders] (from 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

Display change log ATOM feed

Alan Stearns <>, Rossen Atanassov <>, Chairs, Chris Lilley <>, Fuqiao Xue <>, Staff Contacts
Tracker: documentation, (configuration for this group), originally developed by Dean Jackson, is developed and maintained by the Systems Team <>.
$Id: 108.html,v 1.1 2020/01/17 10:38:46 carcone Exp $