Skip to main content

Borders

Borders provide distinction to individual components as well as establishes a sense of overall visual identity throughout the application.

The system includes a set of border concepts that predefine the border's style, width, and color.

  • Decorative: Decorative borders are typically used for elements such as dividers and edges of layout elements.
  • Control: Control borders should be used to style elements such as form controls.
  • Action: Action borders are used to style elements that promote an interactive action such as buttons.
  • Focus: Focus borders are used to style bordered implementations of the focus ring. In CSS, this could either be as a border or outline. Note, there is also a focus variant of a shadow token which should only be used when focus rings must be styled using shadow properties.
  • Selected: Selected borders can be used to style elements that convey when something is selected. Common examples are list-items and tabs.
  • Error: Error borders are specifically used to style error or invalid states on elements. These are commonly used on inputs.

These concept properties are provided as discrete tokens for greater flexibility when styling borders. They may either be defined as individual declarations or using shorthand where appropriate.

As individual declarations:

border-style: var(--jh-border-action-style);
border-width: var(--jh-border-action-width);
border-color: var(--jh-border-action-color);

As CSS shorthand:

border: var(--jh-border-action-style) var(--jh-border-action-width) var(--jh-border-action-color);

You should avoid mixing-and-matching border concept properties.

border-style: var(--jh-border-decorative-style);
border-width: var(--jh-border-focus-width);
border-color: var(--jh-border-error-color);

Instead, when customizations or overrides are needed, use one of the global or alias tokens as appropriate.

border-style: var(--jh-border-action-style);
border-width: var(--jh-border-action-width);
border-color: var(--jh-color-content-positive-enabled);

Border tokens—especially the border-colors—should only be used to style borders. Don't use a border-color token to define other non-border colors such as that of an icon or text. An exception to this is when an element's color needs to be intrinsically linked to that of the border color.

Border style

Border style defines the line style of the border. All of the border concepts within the system currently use the same border style.

Border width

Border width is used to define the thickness of the border. Use the widths defined as part of the border concepts to help promote a consistent user interface.

Border color

The colors that are defined as part of the border concepts serve as sensible defaults for common border applications. However, other color tokens may be used when an alternative color is required such as when defining colors for component states.

Most of the border colors meet color contrast minimums against the primary container. The only exception is jh-border-decorative-color which should only be used in situations where color contrast isn't necessary.

Border radius

Border radius is used to set the rounded-ness of a container or shape. Consistent use of a container's border radius can be used to clarify intent such as whether or not a component is interactive.