Border Field

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

php

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

---

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 — none, solid, dashed, dotted, double
width	string	Border width with unit — e.g. 1px, 2px
color	string	Border color — hex or rgba string

---

Return Value

Type: array

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

php

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

---

Usage Examples

Applying as a CSS shorthand

php

$border = themeplus_get_option( 'card_border', [
    '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>
    .card {
        border: ' . $width . ' ' . $style . ' ' . $color . ';
    }
</style>';

CSS custom properties

php

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

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

css

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

Helper function for reuse

php

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 = esc_attr( $border['width'] ?? '1px'   );
    $color = esc_attr( $border['color'] ?? '#e0e0e0' );

    return $selector . ' { border: ' . $width . ' ' . $style . ' ' . $color . '; }';
}

php

// 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

php

$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

php

[
    '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

• The width value already includes a unit (e.g. 1px) — output it directly without appending a unit.
• Always use the ?? null coalescing operator when reading individual sub-keys, since a partially saved field may be missing some keys.
• When style is none, the width and color values have no visual effect — check for none before outputting if you want to skip the rule entirely.
• For controlling four-sided padding or margin values, use the Spacing field instead.