Border

The Border control adds a complete border group to your custom widget. When someone edits the widget, they get the Border Type dropdown, the Border Width inputs, and the Border Color picker, the same border group you already use everywhere in Elementor. The difference from the Heading control is that this one produces a real value and prints CSS on the front end.

You add it once in the Widget Builder, point it at a CSS selector, and the control does the rest. The editor sets a border, and Master Addons writes the matching CSS to whatever element your selector targets. No PHP, no hand-written style rules.

Screenshot: the Border control settings panel showing Label, Name, Description, Default Value, Responsive Control, Dynamic Support, Frontend Available, Separator, Conditions, Control Classes, and Selector. Upload border-control-settings.png here.

What the Border control adds to your widget #

Once the control is in place, whoever edits your custom widget sees a standard Elementor border group under it:

• Border Type — a dropdown with Default, None, Solid, Double, Dotted, Dashed, and Groove.
• Border Width — Top, Right, Bottom, and Left inputs, with a responsive device icon so the width can change per breakpoint.
• Border Color — a color picker for the border, including global and custom colors.

Screenshot: the Border Type dropdown, Border Width inputs, and Border Color picker the control adds inside a custom widget. Upload border-control-output.png here.

Why would someone use it in a custom widget? #

Most custom widgets need at least one bordered element: a card, a button, an image frame, a callout box. You could hardcode that border in your CSS, but then nobody can change it. Hand it to the editor instead. They pick the type, width, and color from the panel, and the widget stays flexible from one project to the next.

• Give editors real styling control without letting them near the code.
• Match Elementor’s native border UI, so the widget feels familiar from the first click.
• Reuse one widget across many sites when you ship white-labeled builds, since each project can set its own border style.

Where This Option Appears #

• Inside the Widget Builder, on the Content tab, when you add a new control to your custom widget.
• The border group it generates shows up in the widget’s settings (usually under the Style tab) for whoever edits the widget.
• The border itself renders on the front end, applied to the element named in the control’s Selector.

Available Settings #

Here is every field in the Border control panel, in the order it appears.

Label #

The text that appears above the control in the panel, something like “Card Border.” The helper note reads: The label that appears above of the field.

Name #

The unique identifier for the control. It can only contain letters, numbers, and underscores (_). Keep it distinct from your other controls, like card_border.

Description #

Optional helper text that shows below the field in the panel. Use it to spell out what the border applies to, for example “Sets the border around the card wrapper.” Future you will appreciate the note.

Default Value #

The border the control starts with before the editor changes anything. Leave it blank for no default, or set one so a fresh widget already has a sensible border.

Common Settings #

• Show Label — toggles whether the label text is displayed.
• Label Block — when on, the label sits on its own full-width line. Usually on for a border group.
• Responsive Control — turn this on to let the border width change per device (desktop, tablet, mobile). It is what puts the breakpoint icon on the width input.
• Dynamic Support — enable dynamic content support so the value can come from a dynamic source.
• Frontend Available — makes the control value available to front-end JavaScript. Leave it off unless your widget’s JS actually needs to read the border value.
• Separator — sets the position of the separator line: None, Before, After, or Default.
• Conditions — show the border control only when another control has a certain value.
• Control Classes — add custom CSS classes to the control wrapper in the panel.

Selector #

This is the field that does the real work. The Selector tells Master Addons which element gets the border. The default is {{WRAPPER}} .control-class, where {{WRAPPER}} is the widget’s outer wrapper. Swap .control-class for the class of the element you want bordered, like {{WRAPPER}} .promo-card. The type, width, and color the editor picks get written as CSS to that selector.

How the Border Renders #

The Border control does not generate a shortcode you drop into the HTML panel. It is a style control, so it works through the Selector instead. Whatever border the editor sets gets compiled into CSS and attached to the selector you defined. Point the selector at the right element and the border shows up there, nothing else to wire.

How to Use It: A Practical Example #

Say your custom “Promo Card” widget has a wrapper with the class promo-card, and you want the editor to control its border:

1. Open your widget in the Widget Builder and go to the Content tab.
2. Add a Border control. Set its Label to Card Border and its Name to card_border.
3. In the Selector field, enter {{WRAPPER}} .promo-card so the border lands on the card wrapper.
4. Turn on Responsive Control if you want the border width to change on tablet and mobile.
5. Set a Default Value if you want the card to start with, say, a 1px solid light gray border.

Now anyone editing the widget can pick the border type, set the width on each side, and choose a color, and it lands on the card right away.

Common Use Cases #

• Card and box widgets that need an editable frame.
• Custom button widgets where the border is part of the style.
• Image or media wrappers that need a configurable outline.
• Callout and notice boxes with a colored side border (set the width on one side only).
• Pricing or feature widgets where each column can carry its own border.
• Any element you want bordered differently per breakpoint using the responsive option.

Helpful Tips #

• Get the Selector right first. Nine times out of ten, a border that does not show up is just a selector that does not match a real element in your widget’s markup. Open the front end, inspect the element, and confirm the class is actually there.
• Start the selector with {{WRAPPER}} so the styles stay scoped to this widget and do not bleed onto the rest of the page.
• Turn on Responsive Control only when you really need per-device widths, otherwise it just clutters the panel.
• Pair the Border control with a Box Shadow or Dimensions control to give editors full say over a card’s look.
• Group related style controls under a Heading control so the panel stays readable.

The Border control is one of the style building blocks in the Widget Builder. Drop it in, point the selector at the right element, and your custom widget gets the same border controls editors expect from native Elementor, without you writing a line of CSS.

Frequently Asked Questions #