# Border

The Border field is a great way to set the border properties of any HTML object that supports the border property.

# Arguments

Name Type
Default
Description
type string border Value identifying the field type.
default array Array of default values. See 'Default Options' below.
select2 array Array of select2 arguments. Select2 Documentation (opens new window).
validate string color String value color to validate the color selection.  It is the only accepted value for this field.
all bool true Flag to enable all borders using one value.
left bool true Flag to enable the left field border input.
right bool true Flag to enable the right field border input.
top bool true Flag to enable the top field border input.
bottom bool true Flag to enable the bottom field border input.
style bool true Flag to enable the style selector.
color bool true Flag to enable the color picker.
color_alpha bool false Flag to set the color picker to accept an alpha value.

# Default Options

Name Type Description
border-color string Hex string representing the default color.
border-style string Sets the default CSS border. Accepts: solid dotted dashed or none.
border-top string Sets the default value of the top border.
border-right string Sets the default value of the right border.
border-bottom string Sets the default value of the bottom border.
border-left string Sets the default value of the left border.
border-width string Sets the default value of the border's width.

TIP

It is only necessary to set the border-width default when the all argument is set to true.

# Build Config

Build a Custom Configuration →
Changes you make to this form will be reflected in the generated code.
Field visibility requirements.

Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
    'type' => 'border'
) );

# Example Config

Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
    'id'       => 'header-border',
    'type'     => 'border',
    'title'    => esc_html__('Header Border Option', 'your-project-name'),
    'subtitle' => esc_html__('Only color validation can be done on this field type', 'your-project-name'),
    'output'   => array('.site-header'),
    'desc'     => esc_html__('This is the description field, again good for additional info.', 'your-project-name'),
    'default'  => array(
        'border-color'  => '#1e73be', 
        'border-style'  => 'solid', 
        'border-top'    => '3px', 
        'border-right'  => '3px', 
        'border-bottom' => '3px', 
        'border-left'   => '3px'
    )
) );

# Example Usage

This example is based on the code above. Be sure to change $redux_demo to the value you specified in your opt_name argument.

global $redux_demo;

echo 'Border top: '    . $redux_demo['header-border']['border-top'];
echo 'Border bottom: ' . $redux_demo['header-border']['border-bottom'];
echo 'Border left: '   . $redux_demo['header-border']['border-left'];
echo 'Border right: '  . $redux_demo['header-border']['border-right'];
echo 'Border style: '  . $redux_demo['header-border']['border-style'];
echo 'Border color: '  . $redux_demo['header-border']['border-color'];