Grapesjs Style Border

The GrapesJS Style Manager exposes border as one control, which means a design needing a line on only one edge — a table rule, an underlined heading, a left accent bar — cannot be expressed visually. This plugin splits it apart.

What it adds

Five separate properties replace the single one: border plus border-top, border-right, border-bottom and border-left. Each carries its own width, style and color sub-controls, and the original combined property is removed so the panel does not show two competing controls for the same CSS.

Options

• sector — which Style Manager sector the properties are appended to. Defaults to decorations.
• originalBorder — the sector and name of the stock border property to remove, so the plugin still works if you renamed it.
• at — an index, for when the properties need to sit at a specific position rather than at the end of the sector.
• extendType, extendWidth, extendStyle and extendColor — extend the shared sub-properties.
• extendBorder, extendBorderTop, extendBorderRight, extendBorderBottom and extendBorderLeft — extend each side individually.

Good to know

Install as grapesjs-style-border.