Aero Page Builder Documentation

Border

Border

The Border group draws a solid line around the container — on all four sides or only some of them — in one color, with optional rounded corners.

Three example boxes: one with a 2px blue border on all sides and square corners; one with only a 4px orange bottom border; one with a 2px green border and 16px rounded corners.
All sides, one side only, and rounded corners. The border is always a solid line.

The fields

The Border group: Top, Right, Bottom and Left fields set to none; a Border color swatch set to black; a Border radius field set to none with the hint Examples: none, 4px, 8px, 50%.
The Border group with its defaults: no border, black, square corners.
FieldDefaultWhat to type
Top / Right / Bottom / Left none The thickness of the line on that side: 1px, 2px, 4px… or none for no line. Each side is independent.
Border color #000000 (black) Click the swatch to open the color picker, or type a hex color such as #184D9B. One color is used for all sides that have a border.
Border radius none How rounded the corners are: 4px (subtle), 8px, 16px, or 50% (a pill or circle shape). none keeps square corners.

How it behaves

  • Solid only. There is no dashed or dotted option; the line is always continuous.
  • The border sits between padding and margin. Without padding, the content touches the line. Add 16px to 32px of padding when you draw a border on all sides.
  • The radius also clips the background. When you set a radius, the container background (color, image or video) is rounded to the same corners, and anything that would stick out of the rounded corner is cut off.
  • The radius works without a border. You can round the corners of a plain background band by setting a radius and leaving all sides at none.
  • Sizes follow the same rules as padding: a number with a unit (px, rem, em, %). Invalid values are rejected when you save.

Examples

LookTopRightBottomLeftColorRadius
Thin frame1px1px1px1px#D9E2EC8px
Card with rounded corners2px2px2px2px#009A6E16px
Accent line on the left (quote style)nonenonenone6px#FF6D00none
Divider under the componentnonenone1pxnone#CBD2D9none

The 90%-wide feature box on the Component Width page is a real example: a 3px green border with rounded corners.