CSS3
inset
Borders




Acorn Banksia

Australian native (Banksia prionotes)
The cylindrical flower spikes are conspicuous as they occur at the end of the branches. They have a distinct "acorn shape" as the flowers open and are orange in colour about 100-150 mm long by 80 mm diameter. Flowering is usually during autumn and winter.
These "inset border" styles are all applied to the same HTML page. Clicking on the style buttons does not load a new page, it just changes the CSS style sheet (using alternate style sheets). The HTML applies the image as a "background-image" using inline CSS rules on an empty div. The alternate style sheets each apply different rules to achieve the various styles.

Style 21 uses semi-opaque colour borders, with no border-image.
Style 22 uses a border image (JBframe22.png) with a lineal gradient on each side.
Style 23 uses a border image (JBframe23.png) with a lineal gradient on each side and with rounded corners.
The CSS for JBframe24 specifies border-radius of 100%, which makes it an ellipse. Since the image (Banksia flower) is applied as a CSS background-image with "background-clip: border-box;" those portions of the image which lie outside the border are not displayed.