- Where to find it
- Labelled Border in the "Selected Column" section of the Modify drawer.
- Per device
- Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
- Underlying CSS
border
In plain English
A border is the outline drawn around your column — the frame around the picture. It takes three decisions: how thick the line is, what kind of line it is, and what colour.
All three have to be set for anything to appear. A colour on its own draws nothing, because the default line style is "none". If your border is not showing up, the style is almost always what is missing.
Borders are the quickest way to turn a plain block into a card, to separate a sidebar from the main content, or to draw a quiet line under a heading.
What each option does
| Option | What you will see |
|---|---|
solid | A single continuous line. The right choice nine times out of ten. |
dashed | A line of short dashes. Suggests something provisional or a drop target. |
dotted | A line of dots. Quieter than dashed. |
double | Two parallel lines. Needs at least 3px of width to be visible as two. |
none | No line at all. This is the default, which is why setting only a colour does nothing. |
When you would use it
- A block of content should read as a distinct card.
- You want a single dividing line — set a width and colour on just one side.
- An input or button needs a visible outline.
How to change it
- Select the column, open "Selected Column", then "Border".
- Set the width (1px or 2px suits most designs), pick a style such as "solid", and choose a colour.
- Use the per-side controls when you only want a line on, say, the bottom.
- Soften the corners with Border Radius if you want a rounded card.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.
Watch out for
- Nothing appears until the style is set to something other than "none". This catches almost everyone the first time.
- A border adds to the visible size of the column — a 2px border on all sides makes it 4px wider and taller.
- RuleCMS writes borders out as separate width, style, and colour properties rather than the shorthand, so a border you set here will not accidentally wipe out a value elsewhere.
Related settings
For developers
The technical reference for what this setting produces: MDN: border. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.
Where to go next
- Back to the full attribute reference
- The Composer — the editing surface these settings live in.
- Publishing — how a change like this reaches your live site.