Flying Saucer: CSS Borders Support

Previous Page

Next Page

Flying Saucer XML/CSS2 Renderer

CSS Border Support

Border support includes: CSS border styles, colors, width, on any or all four sides of a box. You can apply both border shorthand "border: 1px solid black") or individual border properties ("border-style: dashed") to all sides or to individual sides. Shorthand expansion allows you to specify properties for one, two, three or four sides, in any order. To make the border samples easier to see, we've colored the background. Note that some border effects only show properly with a larger border width.

1px solid border | 1px dashed
1px dotted | 4px inset
4px outset | 4px ridge
4px grooved | 4px double
2px different | 2px three different
2px four different | 2px red
2px two colors | 2px three colors
2px four colors