Report an issue
Class

CKEDITOR.tools.style.border

class since 4.12.0

Represents the CSS border style.

Filtering

Properties

  • color : String

    Represents the value of the CSS color property.

  • style : String

    Represents the value of the CSS style property.

  • width : String

    Represents the value of the CSS width property.

Methods

  • constructor( [ props ] ) → border

    Creates a new instance of the border style.

    Parameters

    [ props ] : Object

    Style-related properties.

    Returns

    border

Static methods

  • static

    fromCssRule( value ) → border

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

    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.

  • static

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

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

    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.

    [ fallback ] : Object

    Fallback object used to fill up missing 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.