First Issue: Several people have commented that they would like a way to clip out the center part of the image. There are two options for this: A) Keep the middle part by default (current behavior). Add an empty keyword that clips out the middle part. B) Make the middle part clip out by default. Add afill keyword that keeps it. (It’s needed for stretch-tiling things like aqua buttons.) Of course we might also just keep the current solution, C) have authors make that part of the image transparent. Comments? What would you use?

Second Issue: The syntax is particularly arcane. One commenter suggested breaking up border-image into multiple properties, leaving border-image itself as a shorthand. For example,

border-image: url(...) 20% 40% / 10% 4em 20% / 0 1em;

would be equivalent to

border-image-source: url(...);
border-image-slice: 20% 40%;
border-image-widths: 10% 4em 20%;
border-image-outset: 0 1em;

This would also allow the values to cascade independently, making it easy to e.g. swap just the image. There’s an overhead cost to more properties, however, so if we do this there needs to be a significant and useful advantage. Thoughts on this idea, or any other ideas for making border-image easier to understand? Read more…

• No Related Post