Properties

Border Width / Border Radius

These properties define the appearance of the border around any control in PLCVisu.

General Behavior

To visually display a border — whether color, radius, or style — you must define a valid Border Width.
If [code_block_0] is left empty or set to [code_block_1], no border will be rendered, regardless of the color or radius settings.

Also note: Even if [code_block_0] and [code_block_3] are correctly defined, you may not see any visible border if the border color is set to white – which is the default for some controls on a white background.
To ensure visibility, set a contrasting [code_block_4] manually (e.g. black or theme-based gray).

Accepted Format and Units

Both Border Width and Border Radius support standard CSS input syntax:

Valid Units:

  • Absolute: [code_block_5], [code_block_6], [code_block_7], [code_block_8], [code_block_9]
  • Relative: [code_block_10], [code_block_11], [code_block_12], [code_block_13]
  • Keywords (Border Width only): [code_block_14], [code_block_15], [code_block_16]

Value Definitions:

  • One value → all sides (e.g. [code_block_17])
  • Two values → top/bottom & left/right (e.g. [code_block_18])
  • Three values → top, left/right, bottom (e.g. [code_block_19])
  • Four values → top, right, bottom, left (e.g. [code_block_20])

These follow the same behavior as in [link_0] and [link_1], unless limited by the control's implementation.

⚠️ Percent-based values in [code_block_3] depend on the control’s shape. Use with caution for non-square elements.

Practical Example

[code_block_22]

This results in:

  • A 2px border on top and bottom only
  • Rounded corners based on font-size scaling ([code_block_10])

Internal Rendering Notes

  • [code_block_4] must be set to a visible color (not white on white) to make borders visible.
  • If [code_block_0] is set but no color is defined, a default (usually white or theme-based) will be applied.
  • Border style (solid, dashed, etc.) is applied globally or via CSS classes, not in this input field.

Confirmed Compatibility Table

Value Type px em ex rem % thin medium thick
Border Width ✔︎ ✔︎ ✔︎ ✔︎ – ✔︎ ✔︎ ✔︎
Border Radius ✔︎ ✔︎ ✔︎ ✔︎ ✔︎ – – –

Note: For keyword values [code_block_14], [code_block_15], [code_block_16], do not append numbers (e.g. [code_block_29]) – just type the keyword directly.