CSS border-transform
CSS could have a border-transform -feature, where the border is transformed according to a mathematical curve. A parabola or hyperbola, for example. Syntax:
border-transform-top-left: 100px, parabola 50px 25px, no-repeat;
Here 100px would stand for how much the border is offset from the corner, along the border and in a clockwise direction. In this example the coner is the top left corner. parabola would denote the shape. The width of the parabola would be denoted by 50px. 25px would denote how much the parabola extends outside the div, and a negative value would denote a parabola extending inside the div. With no-repeat that’s it, but if that value would instead be repeat, the curve would be repeated whenever the segment ends.
If there were this kind of a function, I maybe could improve the leaves still just a bit. :)
In later versions the function could be subjected to the CSS transform functions, so that the shape of the curve could be altered the same way as CSS transform can alter the shape of a div. Also, there could probably be many more curves than parabola and hyperbola, such as square, triangle and saw. A useful one would be a segment of the sine wave from positions -n/2 to 3n/2, which, if repeated, shows a continuous sine wave. Of course, people would want the line to be offset from the border so that without border-transform the border would be a locus traveling along -1.
Multiple border-transforms could be used on one corner. The top-left doesn’t denote that the border-transform would necessarily have to be visibly specific to the top left corner. It’s just a way of fixing the location of the border-transform relative to some point of the border.
One could make nice classical picture frames this way with CSS. You know, the more dramatic ones with some detail.
You could use this to make just about anything. Not just fine wooden frames. Explosions, for example! Or the sidebar div for the website of a saw factory. Maybe even pretty clouds.


