Border Field

A combined border control for setting style, width, and color in one field.

Last updated: June 13, 2026

Overview

The Border field renders a grouped control with a border style selector, a width input, and a color picker. It returns an associative array with style, width, and color keys. Use it for card borders, section dividers, input field borders, button borders, or any other element that needs a complete border definition in one setting.

Field Registration

[
    'id'      => 'card_border',
    'type'    => 'border',
    'title'   => __('Card Border', 'your-textdomain'),
    'subtitle' => __('Border applied to all card elements', 'your-textdomain'),
'default' => [
    'style'  => 'solid',
    'width'  => 1,
    'color'  => '#e0e0e0',
    'radius' => 0,
],
]

Field Options

Option	Type	Required	Description
`id`	`string`	✅	Unique field identifier — used as the option key
`type`	`string`	✅	Must be `border`
`title`	`string`	✅	Label shown above the field
`subtitle`	`string`	—	Smaller descriptive text shown below the label
`desc`	`string`	—	Help text shown below the border controls
`default`	`array`	—	Default values — see sub-options below
`required`	`array`	—	Conditional logic rules — see Conditional Logic

Default Sub-options

Key	Type	Description
`style`	`string`	Border style — `'solid'`, `'dashed'`, `'dotted'`, `'double'`
`width`	`int`	Border width as a plain integer — e.g. `1`, `2` (no unit stored)
`color`	`string`	Border color — hex or rgba string
`radius`	`int`	Border radius as a plain integer — e.g. `8`, `16` (no unit stored)

Return Value

Type: array

Returns an associative array with style, width, color, and radius keys, or the default array if nothing has been saved yet.

$border = themeplus_get_option( 'card_border', [] );
// Returns:
// [
//     'style'  => 'solid',
//     'width'  => 1,      // int — no unit, append 'px' in CSS
//     'color'  => '#e0e0e0',
//     'radius' => 8,      // int — no unit, append 'px' in CSS
// ]

Usage Examples

Applying as a CSS shorthand

$border = themeplus_get_option( 'card_border', [
    'style'  => 'solid',
    'width'  => 1,
    'color'  => '#e0e0e0',
    'radius' => 8,
] );

$style  = esc_attr( $border['style']  ?? 'solid'   );
$width  = absint(   $border['width']  ?? 1          );
$color  = esc_attr( $border['color']  ?? '#e0e0e0'  );
$radius = absint(   $border['radius'] ?? 0          );

echo '
    .card {
        border:        ' . $width  . 'px ' . $style . ' ' . $color . ';
        border-radius: ' . $radius . 'px;
    }
';

CSS custom properties

$border = themeplus_get_option( 'input_border', [
    'style'  => 'solid',
    'width'  => 1,
    'color'  => '#cccccc',
    'radius' => 4,
] );

echo '
    :root {
        --input-border-style:  ' . esc_attr( $border['style']  ?? 'solid'   ) . ';
        --input-border-width:  ' . absint(   $border['width']  ?? 1         ) . 'px;
        --input-border-color:  ' . esc_attr( $border['color']  ?? '#cccccc' ) . ';
        --input-border-radius: ' . absint(   $border['radius'] ?? 0         ) . 'px;
    }
';

input,
textarea,
select {
    border: var(--input-border-width) var(--input-border-style) var(--input-border-color);
}

Helper function for reuse

function mytheme_border_css( string $selector, string $option_id, array $defaults = [] ): string {
    $border = themeplus_get_option( $option_id, $defaults );

    if ( empty( $border ) ) {
        return '';
    }

    $style  = esc_attr( $border['style']  ?? 'solid'  );
    $width  = absint(   $border['width']  ?? 1        );
    $color  = esc_attr( $border['color']  ?? '#e0e0e0' );
    $radius = absint(   $border['radius'] ?? 0        );

    $css  = $selector . ' {';
    $css .= ' border: '        . $width  . 'px ' . $style . ' ' . $color . ';';
    $css .= ' border-radius: ' . $radius . 'px;';
    $css .= ' }';

    return $css;
}

// Usage
$styles  = mytheme_border_css( '.card',          'card_border'   );
$styles .= mytheme_border_css( 'input, textarea', 'input_border'  );
$styles .= mytheme_border_css( '.btn',            'button_border' );

echo '<style>' . $styles . '</style>';

Applying only to specific sides

$border = themeplus_get_option( 'section_divider', ['style' => 'solid', 'width' => '1px', 'color' => '#e0e0e0'] );

$style = esc_attr( $border['style'] ?? 'solid'   );
$width = esc_attr( $border['width'] ?? '1px'     );
$color = esc_attr( $border['color'] ?? '#e0e0e0' );

echo '<style>
    .section + .section {
        border-top: ' . $width . ' ' . $style . ' ' . $color . ';
    }
</style>';

With a conditional field

[
    'id'      => 'enable_card_border',
    'type'    => 'toggle',
    'title'   => __('Enable Card Border', 'your-textdomain'),
    'default' => true,
],
[
    'id'       => 'card_border',
    'type'     => 'border',
    'title'    => __('Card Border', 'your-textdomain'),
    'default'  => ['style' => 'solid', 'width' => '1px', 'color' => '#e0e0e0'],
    'required' => ['enable_card_border', '==', true],
],

Notes

width and radius are stored as plain integers — always append 'px' when using in CSS (e.g. absint( $border['width'] ) . 'px').
radius controls the border-radius — output it as a separate CSS property, not as part of the border shorthand.
Always use ?? null coalescing when reading sub-keys — a partially saved field may be missing some keys.
When style is 'solid', 'dashed', 'dotted', or 'double', all four keys contribute to the output. When style is not set or is empty, skip the border rule entirely.
For controlling four-sided padding or margin values, use the Spacing field instead.

Quick Links