CKEditor Ecosystem Documentation
Search
Report an issue
Home/CKEditor 4/API
Class

CKEDITOR.tools.style.border

class since 4.12.0
See source

Represents the CSS border style.

Filtering

Properties

  • color : String

    Represents the value of the CSS color property.

    See source

  • style : String

    Represents the value of the CSS style property.

    See source

  • width : String

    Represents the value of the CSS width property.

    See source

Methods

  • constructor( [ props ] ) → border

    Creates a new instance of the border style.

    See source

    Parameters

    [ props ] : Object

    Style-related properties.

    Properties
    [ color ] : String

    Border color.

    [ style ] : String

    Border style.

    [ width ] : String

    Border width.

    Returns

    border

Static methods

  • fromCssRule( value ) → border

    static

    Parses the CSS border property shorthand format. This CSS property does not support inheritance.

    See source
    console.log( CKEDITOR.tools.style.border.fromCssRule( '3px solid #ffeedd' ) );
// Logs: Border { width: '3px', style: 'solid', color: '#ffeedd' }

    Parameters

    value : String

    The border property value.

    Returns

    border

    Border style.

  • splitCssValues( styles, [ fallback ] ) → Object.<String, border>

    static

    Parses the style, width and color shorthand styles into border side shorthand styles.

    See source
    var styles = {
    'border-color': 'red blue',
    'border-style': 'solid dotted solid',
    'border-width': '1px 2px 3px 4px'
};

console.log( CKEDITOR.tools.style.border.splitCssValues( styles ) );
// Logs:
// {
//  'border-top': Border { width: '1px', style: 'solid', color: 'red' },
//  'border-right': Border { width: '2px', style: 'dotted', color: 'blue'},
//  'border-bottom': Border { width: '3px', style: 'solid', color: 'red' },
//  'border-left': Border { width: '4px', style: 'dotted', color: 'blue' }
// }

// Use fallback to fill up missing style:
var partialStyles = {
        'border-style': 'solid',
        'border-width': '2px'
    },
    fallback = { color: 'red' };

console.log( CKEDITOR.tools.style.border.splitCssValues( partialStyles, fallback ) );
// Logs:
// {
//  'border-top': Border { width: '2px', style: 'solid', color: 'red' },
//  'border-right': Border { width: '2px', style: 'solid', color: 'red' },
//  'border-bottom': Border { width: '2px', style: 'solid', color: 'red' },
//  'border-left': Border { width: '2px', style: 'solid', color: 'red' }
// }

    Border side shorthands with greater style property specificity are preferred over more general shorthands.

    var styles = {
        'border-style': 'solid',
        'border-width': '2px',
        'border-color': 'red',
        'border-left-color': 'blue',
        'border-right-width': '10px',
        'border-top-style': 'dotted',
        'border-top-color': 'green'
};

console.log( CKEDITOR.tools.style.border.splitCssValues( styles ) );
// Logs:
// {
//  'border-top': Border { width: '2px', style: 'dotted', color: 'green' },
//  'border-right': Border { width: '10px', style: 'solid', color: 'red'},
//  'border-bottom': Border { width: '2px', style: 'solid', color: 'red' },
//  'border-left': Border { width: '2px', style: 'solid', color: 'blue' }
// }

    Parameters

    styles : Object

    Border styles shorthand object.

    Properties
    [ border-color ] : Object

    Border color shorthand.

    [ border-style ] : Object

    Border style shorthand.

    [ border-width ] : Object

    Border width shorthand.

    [ fallback ] : Object

    Fallback object used to fill up missing style.

    Properties
    [ color ] : Object

    Color CSS style used in absence of the border-color style.

    [ style ] : Object

    Style CSS style used in absence of the border-style style.

    [ width ] : Object

    Width CSS style used in absence of the border-width style.

    Returns

    Object.<String, border>
    Properties
    border-top : border

    Border top style.

    border-right : border

    Border right style.

    border-bottom : border

    Border bottom style.

    border-left : border

    Border left style.