Borders and border-radius

Borders define the edge of an element’s box, and border-radius rounds those edges. Together they control a large part of how UI components — buttons, cards, inputs, images — look and feel.

The border shorthand

A border has three required components: width, style, and color. In Site Designer, these three are set independently in the border section of the Style pane:

border: 2px solid #e4e4e7;

You need all three values for a border to appear. A border with style: none (the default) will not render even if you set a width and color.

Border style options:

• solid — a continuous line (most common)
• dashed — evenly spaced dashes
• dotted — a dotted line
• double — two parallel lines
• none — removes the border entirely

Individual sides

You can apply a border to only specific sides of an element. Site Designer shows controls for border-top, border-right, border-bottom, and border-left independently. A common pattern is a bottom-only border for a horizontal rule effect under headings: border-bottom: 1px solid var(--border).

border-radius

Border-radius rounds the corners of an element’s box. A single value rounds all four corners equally. You can also control each corner independently: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.

Outline

outline is a separate property from border. The key difference: outline does not affect layout. Unlike a border, adding or removing an outline does not shift adjacent elements or change the element’s size.

Outlines are drawn outside the border box. They are most commonly used for keyboard focus indicators:

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

outline-offset adds a gap between the element’s edge and the outline line, giving the focus ring more visual clarity.

box-sizing: border-box

By default in CSS, width and height apply to the content area only — borders and padding are added on top, making the actual rendered size larger than what you specified. This is box-sizing: content-box.

Site Designer (like all modern CSS resets and frameworks) sets box-sizing: border-box on all elements by default. With border-box, width and height include the padding and border. A div with width: 300px, padding: 16px, and border: 2px solid will render exactly 300 px wide — the padding and border are subtracted from the content area, not added to the outside.

This is almost always the behavior you want. It makes sizing predictable: the number you type is the number you get.