Borders

From FHTML

1 What's the same as html?

• FluidHtml supports most standard html border properties, also some fancy things.
• Unless indicated otherwise, the following properties are fully supported:

1.1 border

1.2 border-color

As in html, you must specify a border style as well as a border color.

1.3 border-style

There appears to be a bug here! Working on it...

1.4 border-width

1.5 border-radius

• NOTE
  • Fhtml supports 'px' and '%' values for border radii. It does not support 'em' values.
  • Fhtml doesn't support values with forward slashes in them:
    • Yes: border-radius:10px 20px 50% 50%;
    • No: border-radius: 2em 1em 4em / 0.5em 3em;

1.6 sub-properties

All html border properties are supported.

border-top
border-top-color
border-top-style
border-top-width
border-top-left-radius
border-top-right-radius

border-right
border-right-color
border-right-style
border-right-width

border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-bottom-left-radius
border-bottom-right-radius

border-left
border-left-color
border-left-style
border-left-width

2 What's extra?

Fluidhtml uses assets that can be stored and reused in an application. For more info, see Assets. Using assets is more flexible than the CSS equivalent definitions.

2.1 Gradient borders

• To use a gradient as a border:
  • Create a background gradient asset (see below).
  • Create a border asset and point its 'background' property to that asset.
  • Point to border asset in CSS.

2.2 Bitmap borders

• To use a bitmap as a border:
  • Create a bitmap asset (see below).
  • Create a background asset and point its 'bitmap' property to that bitmap asset.
  • Create a border asset and point its 'background' property to that background asset.
  • Point to border asset in CSS.
  • In this example, we use a cool image of some books as a border.

2.3 Pixelbender borders

• To use a pixelbender as a border:
  • Create a pixelbender asset (see below).
  • Create a background asset and point its 'pixelbender' property to that pixelbender asset.
  • Create a border asset and point its 'background' property to that background asset.
  • Point to border asset in CSS.

NOTE: This example might seem like it's a gradient fill, but it's actually a 3 point radial gradient created in a pixelbender filter. Flash Player can natively create linear and single-point radial gradients.

2.4 Special shortcut usage

• Fhtml border shortcuts allow for some special usage.
• Html border shortcuts specify border-color, border-style and border-width:, (in any order) like so:

• Fhtml allows you to get creative with the border-color and border-style properties when using border shortcuts. The sections above described gradient, bitmap and pixelbender assets. Each of those can be defined in a border shortcut.
• The following uses a tiled bitmap as a border, using the word 'bitmap' where we'd normally find a border style type (solid, dotted, dashed, etc...). The difference between this and the example Bitmap Border above is that we can apply the border without declaring a border asset:

You can combine any of the possible asset types and place those border assets on the top, left, bottom, or right.