La propiedad border es una propiedad abreviada para:

• border-width - Especifica el ancho del borde. El valor predeterminado es "medium"
• border-style - Especifica el estilo del borde. El valor predeterminado es "none" (requerido)
• border-color - Especifica el color del borde. El valor predeterminado es el color del texto.
• initial - Establece esta propiedad en su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

Si se omite el color del borde, el color aplicado será el color del texto.

Valor por defecto: medium none color

Sintaxis de JavaScript: object.style.border="3px solid blue"

Sintaxis CSS: border: border-width border-style border-color|initial|inherit;

Nota: debemos dejar un espacio en blanco entre los valores.

Posibles valores: thin | medium | thick | tamaño (px, pc, pt, mm, cm, in) | nombre del color(inglés) | #xxxxxx | transparent | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

Las diferentes maneras de aplicarlo son:

• Todos los bordes: border: 10px solid red;
• Si queremos aplicarlo por separado utilizaremos:
  • El borde superior border-top
  • El borde inferior border-bottom
  • El borde izquierdo border-left
  • El borde derecho border-right

<div>
    <h2>
        Propiedad CSS <br>
        border: none;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border: 
        none
        dotted 2px #FF0000
        dashed 3px #00FF00
        solid 1px #0000FF
        double 5px #FF0000
        groove 10px red
        ridge 10px rgb(189,183,107)
        inset 10px LimeGreen
        outset 10px rgb(255,69,0)
        initial
     ;
    text-align: center;
}

La propiedad border-bottom es una propiedad abreviada de (en el siguiente orden):

• border-bottom-width - ancho del borde inferior
• border-bottom-style - estilo borde inferior
• border-bottom-color - color del borde inferior

Si se omite el color del borde inferior, el color aplicado será el color del texto.

Valor por defecto: medium none color

Sintaxis de JavaScript: object.style.borderBottom="15px dotted lightblue"

Sintaxis CSS: border-bottom: border-width border-style border-color|initial|inherit;

Valores de propiedad

• border-bottom-width - Necesario. Especifica el ancho del borde inferior. El valor predeterminado es "medium"
• border-bottom-style - Necesario. Especifica el estilo del borde inferior. El valor predeterminado es "none"
• border-bottom-color - Opcional. Especifica el color del borde inferior. El valor predeterminado es el color del texto.
• initial - Establece esta propiedad en su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

Nota: debemos dejar un espacio en blanco entre los valores.

Posibles valores: thin | medium | thick | tamaño (px, pc, pt, mm, cm, in) | nombre del color(inglés) | #xxxxxx | transparent | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

<div>
    <h2>
        Propiedad CSS <br>
        border-bottom: none;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border-bottom: 
        none
        dotted 2px #FF0000
        dashed 3px #00FF00
        solid 1px #0000FF
        double 5px #FF0000
        groove 10px red
        ridge 10px rgb(189,183,107)
        inset 10px LimeGreen
        outset 10px rgb(255,69,0)
     ;
    text-align: center;
}

Especifica el color del borde inferior.

Nota: Declare siempre la propiedad border-style o border-bottom-style antes de la propiedad border-bottom-color. Un elemento debe tener un borde antes de poder cambiar el color.

Valor por defecto: El color actual del elemento.

Sintaxis JavaScript: object.style.borderBottomColor="blue"

Sintaxis CSS: border-bottom-color: color|transparent|initial|inherit;

Valores de propiedad:

• color - Especifica el color de fondo.
• transparent - Especifica que el color del borde debe ser transparente
• initial - Establece esta propiedad en su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS border <br>
        border-bottom-color: black;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border-bottom: 10px solid;
    border-bottom-color: 
        black
        transparent
        Coral
        #00FF00
        rgb(189,183,107)
        Orange
        rgb(199,21,133)
        hsl(89, 43%, 51%)
        hsla(89, 43%, 51%, 0.3)
        initial
     ;
    text-align: center;
}

La propiedad border-bottom-left-radius define el radio de la esquina inferior izquierda.

Valor por defecto: 0

Sintaxis JavaScript: object.style.borderBottomLeftRadius="25px"

Sintaxis CSS: border-bottom-left-radius: length|% [length|%]|initial|inherit;

Nota: Si establece dos valores, el primero es para el borde inferior y el segundo para el borde izquierdo. Si se omite el segundo valor, se copia del primero. Si cualquiera de las longitudes es cero, la esquina es cuadrada, no redondeada.

Valores de propiedad:

• length Define la forma de la esquina inferior izquierda. El valor predeterminado es 0.
• % Define la forma de la esquina inferior izquierda en %
• initial - Establece esta propiedad en su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS <br>
        border-bottom-left-radius: 0;
    </h2>
    <div id="MyDiv"></div>
</div>

#MyDiv {
    background-color: #B87223;
    border-bottom-left-radius: 
        0
        10px
        10%
        20px
        50px
        50%
        50px 10px
        50% 10%
        100px
        100%
        initial
     ;
    height: 200px;
    margin: 1em auto;
    width: 200px;
}

La propiedad border-bottom-right-radius define el radio de la esquina inferior derecha.

Valor por defecto: 0

Sintaxis JavaScript: object.style.borderBottomRightRadius="25px"

Sintaxis CSS: border-bottom-right-radius: length|% [length|%]|initial|inherit;

Nota: Si establece dos valores, el primero es para el borde inferior y el segundo para el borde derecho. Si se omite el segundo valor, se copia del primero. Si cualquiera de las longitudes es cero, la esquina es cuadrada, no redondeada.

Valores de propiedad:

• length Define la forma de la esquina inferior derecha. El valor predeterminado es 0.
• % Define la forma de la esquina inferior derecha en %
• initial - Establece esta propiedad en su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS <br>
        border-bottom-right-radius: 0;
    </h2>
    <div id="MyDiv"></div>
</div>

#MyDiv {
    background-color: #B87223;
    border-bottom-right-radius: 
        0
        10px
        10%
        20px
        50px
        50%
        50px 10px
        50% 10%
        100px
        100%
        initial
     ;
    height: 200px;
    margin: 1em auto;
    width: 200px;
}

La propiedad border-bottom-style establece el estilo del borde inferior de un elemento.

Valor por defecto: none

Sintaxis JavaScript: object.style.borderBottomStyle="dotted"

Sintaxis CSS: border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Valores de propiedad:

• none No especifica borde. Esto es por defecto
• hidden Lo mismo que "ninguno", excepto en la resolución de conflictos fronterizos para elementos de tabla
• dotted Especifica un borde punteado
• dashed Especifica un borde discontinuo
• solid Especifica un borde sólido
• double Especifica un borde doble
• groove Especifica un borde acanalado 3D. El efecto depende del valor del color del borde.
• ridge Especifica un borde ondulado 3D. El efecto depende del valor del color del borde.
• inset Especifica un borde de inserción 3D. El efecto depende del valor del color del borde.
• outset Especifica un borde de inicio 3D. El efecto depende del valor del color del borde.
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-bottom-style: none;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border-bottom: 10px #0ba30b;
    border-bottom-style: 
        none
        dotted
        dashed
        solid
        double
        groove
        ridge
        inset
        outset
        initial
     ;
    text-align: center;
}

La propiedad border-bottom-width establece el ancho del borde inferior de un elemento.

Nota: Declare siempre la propiedad border-style o el border-bottom-style antes de la propiedad border-bottom-width. Un elemento debe tener bordes antes de poder cambiar el ancho.

Valor por defecto: medium

Sintaxis JavaScript: object.style.borderBottomWidth="5px"

Sintaxis CSS: border-bottom-width: medium|thin|thick|length|initial|inherit;

Valores de propiedad:

• medium Especifica un borde inferior medio. Esto es por defecto
• thin Especifica un borde inferior delgado
• thick Especifica un borde inferior grueso
• length Le permite definir el grosor del borde inferior.
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-bottom-width: medium;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border-bottom:solid;
    border-bottom-width: 
        medium
        thin
        thick
        1px
        10px
        initial
     ;
    text-align: center;
}

La propiedad border-color establece el color de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.

• Si la propiedad border-color tiene cuatro valores:
  • border-color: red green blue pink;
    • el borde superior es rojo
    • el borde derecho es verde
    • el borde inferior es azul
    • el borde izquierdo es rosa
• Si la propiedad border-color tiene tres valores:
  • border-color: red green blue;
    • el borde superior es rojo
    • los bordes derecho e izquierdo son verdes
    • el borde inferior es azul
• Si la propiedad border-color tiene dos valores:
  • border-color: red green;
    • los bordes superior e inferior son rojos
    • los bordes derecho e izquierdo son verdes
• Si la propiedad border-color tiene un valor:
  • border-color: red;
    • los cuatro bordes son rojos

Nota: Siempre declare la propiedad border-style antes de la propiedad border-color. Un elemento debe tener bordes antes de poder cambiar el color.

Valor por defecto: El color actual del elemento.

Sintaxis JavaScript: object.style.borderColor="#FF0000 blue"

Sintaxis CSS: border-color: color|transparent|initial|inherit;

Valores de propiedad:

• color Especifica el color de fondo. El color predeterminado es negro
• transparent Especifica que el color del borde debe ser transparente
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-color: black;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border:10px solid;
    border-color: 
        black
        transparent
        #A81A06
        #0000FF
        rgb(255,165,0)
        rgb(50,205,50)
        red
        Teal
        red blue
        red green blue
        red blue green orange
        initial
     ;
    text-align: center;
}

La propiedad border-image le permite especificar una imagen que se utilizará como borde alrededor de un elemento.

La propiedad border-image es una propiedad abreviada para:

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

Los valores omitidos se establecen en sus valores predeterminados.

Valor por defecto: none 100% 1 0 stretch

Sintaxis JavaScript: object.style.borderImage="url(border.png) 30 round"

Sintaxis CSS: border-image: source slice width outset repeat|initial|inherit;

Valores de propiedad:

• border-image-source La ruta a la imagen que se utilizará como borde
• border-image-slice Cómo cortar la imagen del borde
• border-image-width El ancho de la imagen del borde
• border-image-outset La cantidad en la que el área de la imagen del borde se extiende más allá del cuadro del borde
• border-image-repeat Si la imagen del borde debe repetirse, redondearse o estirarse
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-image: none 100% 1 0 stretch;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border:10px solid transparent;
    border-image: 
        none 100% 1 0 stretch
        url(IMAGEN) 30 stretch
        url(IMAGEN) 30 repeat
        url(IMAGEN) 30 round
        url(IMAGEN) 50 round
        url(IMAGEN) 20% round
        url(IMAGEN) 30% round
        url(IMAGEN) 20% stretch
        url(IMAGEN) 30% stretch
        url(IMAGEN) 40% stretch
        initial
     ;
    text-align: center;
}

Imagen usada:

La propiedad border-image-outset especifica la cantidad en que el área de la imagen del borde se extiende más allá del cuadro del borde.

Valor por defecto: 0

Sintaxis JavaScript: object.style.borderImageOutset="10px"

Sintaxis CSS: border-image-outset: length|number|initial|inherit;

Nota: La propiedad border-image-outset puede tomar de uno a cuatro valores (lados superior, derecho, inferior e izquierdo). Si se omite el cuarto valor, es lo mismo que el segundo. Si también se omite el tercero, es igual que el primero. Si también se omite el segundo, es igual que el primero.

Valores de propiedad:

• length Una unidad de longitud que especifica qué tan lejos de los bordes aparecerá la imagen del borde. El valor predeterminado es 0
• number Representar múltiplos del ancho del borde correspondiente.
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-image-outset: 0;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border:15px solid transparent;
    border-image:url(../img/css/border.png) 30 round;
    border-image-outset: 
        0
        1
        1 0
        1 0 0
        1 0 1 1
        2px
        5px
        10px
        10px 2px
        10px 5px
        10px 5px 2px
        10px 5px 5px
        10px 5px 15px 5px
        10px 5px 15px 10px
        initial
     ;
    text-align: center;
}

Imagen usada:

La propiedad border-image-repeat especifica si la imagen del borde debe repetirse, redondearse o estirarse.

Valor por defecto: stretch

Sintaxis JavaScript: object.style.borderImageRepeat="round"

Sintaxis CSS: border-image-repeat: stretch|repeat|round|initial|inherit;

Nota: Esta propiedad especifica cómo se escalan y se colocan en mosaico las imágenes de los lados y la parte media de la imagen del borde. Entonces, puede especificar dos valores aquí. Si se omite el segundo valor, se supone que es el mismo que el primero.

Valores de propiedad:

• stretch Valor por defecto. La imagen se estira para llenar el área.
• repeat La imagen está en mosaico (repetida) para llenar el área
• round La imagen está en mosaico (repetida) para llenar el área. Si no llena el área con un número completo de mosaicos, la imagen se redimensiona para que se ajuste
• space La imagen está en mosaico (repetida) para llenar el área. Si no llena el área con un número entero de mosaicos, el espacio adicional se distribuye alrededor de los mosaicos.
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-image-repeat: stretch;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border:15px solid transparent;
    border-image:url(../img/css/border.png) 30;
    border-image-repeat: 
        stretch
        repeat
        round
        initial
     ;
    text-align: center;
}

Imagen usada:

La propiedad border-image-slice especifica cómo cortar la imagen especificada por border-image-source. La imagen siempre se divide en nueve secciones: cuatro esquinas, cuatro bordes y el medio.

La parte "intermedia" se trata como completamente transparente, a menos que se establezca la palabra clave fill (relleno).

Valor por defecto: 100%

Sintaxis JavaScript: object.style.borderImageSlice="30%"

Sintaxis CSS: border-image-slice: number|%|fill|initial|inherit;

Nota: La propiedad border-image-slice puede tomar de uno a cuatro valores. Si se omite el cuarto valor, es lo mismo que el segundo. Si también se omite el tercero, es igual que el primero. Si también se omite el segundo, es igual que el primero.

Valores de propiedad:

• number Los números representan píxeles para imágenes rasterizadas o coordenadas para imágenes vectoriales
• % Los porcentajes son relativos al alto o ancho de la imagen.
• fill Hace que se muestre la parte media de la imagen
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-image-slice: 100%;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border:15px solid transparent;
    border-image:url(../img/css/border.png) round;
    border-image-slice: 
        100%
        10
        30
        50
        20 25
        20 30
        40 10
        10%
        30%
        50%
        20% 25%
        20% 30%
        40% 10%
        10% fill
        30% fill
        50% fill
        20% 25% fill
        20% 30% fill
        40% 10% fill
        initial
     ;
    text-align: center;
}

Imagen usada:

La propiedad border-image-source especifica la ruta a la imagen que se utilizará como borde (en lugar del borde normal alrededor de un elemento).

Sugerencia: si el valor es none, o si la imagen no se puede mostrar, se utilizarán los estilos de borde.

Valor por defecto: none

Sintaxis JavaScript: object.style.borderImageSource="url(border.png)"

Sintaxis CSS: border-image-source: none|image|initial|inherit;

Valores de propiedad:

• none No se utilizará ninguna imagen
• image La ruta a la imagen que se utilizará como borde.
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-image-source: none;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border:15px solid transparent;
    border-image-source: 
        none
        url(IMAGEN_1)
        url(IMAGEN_2)
        url(IMAGEN_3)
        url(IMAGEN_4)
        url(IMAGEN_5)
        initial
     ;
    border-image-slice: 30;
    text-align: center;
}

Imagenes usadas:

La propiedad border-image-width especifica el ancho de la imagen del borde.

Valor por defecto: 1

Sintaxis JavaScript: object.style.borderImageWidth="20px"

Sintaxis CSS: border-image-width: number|%|auto|initial|inherit;

Nota: La propiedad border-image-width puede tomar de uno a cuatro valores (lados superior, derecho, inferior e izquierdo). Si se omite el cuarto valor, es lo mismo que el segundo. Si también se omite el tercero, es igual que el primero. Si también se omite el segundo, es igual que el primero.

Valores de propiedad:

• length Una unidad de longitud (px) que especifica el tamaño del ancho del borde
• number Valor predeterminado 1. Representa múltiplos del ancho del borde correspondiente
• % Se refiere al tamaño del área de la imagen del borde: el ancho del área para desplazamientos horizontales, la altura para desplazamientos verticales
• auto Si se especifica, el ancho es el ancho o alto intrínseco del segmento de imagen correspondiente
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-image-width: 1;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border:15px solid transparent;
    border-image-source:url(../img/css/border4.png);
    border-image-repeat:round;
    border-image-slice:30;
    border-image-width: 
        1
        2
        1 2
        1 2 2
        1 2 2 1
        initial
        10px
        20px
        40px
        30px 10px
        30px 20px
        30px 30px
        20px 30px
        10px 30px
        30px 30px 10px
        30px 30px 40px
        30px 30px 40px 10px
        30px 30px 40px 20px
        auto
        10%
        20%
        40%
        30% 10%
        30% 20%
        30% 30%
        20% 30%
        10% 30%
        30% 30% 10%
        30% 30% 40%
        30% 30% 40% 10%
        30% 30% 40% 20%
     ;
    text-align: center;
}

Imagen usada:

La propiedad border-left es una propiedad abreviada de (en el siguiente orden):

• border-left-width
• border-left-style (necesario)
• border-left-color

Si se omite border-left-color, el color aplicado será el color del texto.

Valor por defecto: medium none color

Sintaxis JavaScript: object.style.borderLeft="3px dotted blue"

Sintaxis CSS: border-left: border-width border-style border-color|initial|inherit;

Valores de propiedad:

• border-left-width Opcional. Especifica el ancho del borde izquierdo. El valor predeterminado es medium
• border-left-style Necesario. Especifica el estilo del borde izquierdo. El valor predeterminado es none
• border-left-color Opcional. Especifica el color del borde izquierdo. El valor predeterminado es el color del texto.
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-left: none;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border-left: 
        none
        dotted 2px #FF0000
        dashed 3px #00FF00
        solid 1px #0000FF
        double 5px #FF0000
        groove 10px red
        ridge 10px rgb(189,183,107)
        inset 10px LimeGreen
        outset 10px rgb(255,69,0)
        initial
     ;
    text-align: center;
}

La propiedad border-left-color establece el color del borde izquierdo de un elemento.

Nota: Declare siempre la propiedad border-style o border-left-style antes de la propiedad border-left-color. Un elemento debe tener un borde antes de poder cambiar el color.

Valor por defecto: El color actual del elemento

Sintaxis JavaScript: object.style.borderLeftColor="blue"

Sintaxis CSS: border-left-color: color|transparent|initial|inherit;

Valores de propiedad:

• color Especifica el color del borde izquierdo. El color predeterminado es el color del elemento.
• transparent Especifica que el color del borde debe ser transparente
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-left-color: black;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border-left: 10px solid;
    border-left-color: 
        black
        transparent
        #FF0000
        #00FF00
        #0000FF
        LimeGreen
        red
        rgb(189,183,107)
        rgb(255,69,0)
        rgba(201, 76, 76, 0.3)
        hsl(89, 43%, 51%)
        hsla(89, 43%, 51%, 0.3)
        initial
     ;
    text-align: center;
}

La propiedad border-left-style establece el estilo del borde izquierdo de un elemento.

Valor por defecto: none

Sintaxis JavaScript: object.style.borderLeftStyle="dotted"

Sintaxis CSS: border-left-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Valores de propiedad:

• none No especifica borde. Esto es por defecto
• hidden Lo mismo que "none", excepto en la resolución de conflictos fronterizos para elementos de tabla
• dotted Especifica un borde punteado
• dashed Especifica un borde discontinuo
• solid Especifica un borde sólido
• double Especifica un borde doble
• groove Especifica un borde acanalado 3D. El efecto depende del valor del color del borde.
• ridge Especifica un borde estriado 3D. El efecto depende del valor del color del borde.
• inset Especifica un borde de inserción 3D. El efecto depende del valor del color del borde.
• outset Especifica un borde de inicio 3D. El efecto depende del valor del color del borde.
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-left-style: none;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border-left: 10px red;
    border-left-style: 
        none
        dotted
        dashed
        solid
        double
        groove
        ridge
        inset
        outset
        initial
     ;
    text-align: center;
}

La propiedad border-left-width establece el ancho del borde izquierdo de un elemento.

Nota: Declare siempre la propiedad border-style o border-left-style antes de la propiedad border-left-width. Un elemento debe tener bordes antes de poder cambiar el ancho.

Valor por defecto: medium

Sintaxis JavaScript: object.style.borderLeftWidth="5px"

Sintaxis CSS: border-left-width: medium|thin|thick|length|initial|inherit;

Valores de propiedad:

• medium Especifica un borde izquierdo medio. Esto es por defecto
• thin Especifica un borde izquierdo delgado
• thick Especifica un borde izquierdo grueso
• length Le permite definir el grosor del borde izquierdo.
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-left-width: medium;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border-left: solid red;
    border-left-width: 
        medium
        thin
        thick
        10px
        5px
        initial
     ;
    text-align: center;
}

La propiedad border-radius define el radio de las esquinas del elemento.

Esta propiedad puede tener de uno a cuatro valores. Estas son las reglas:

• Cuatro valores: border-radius: 15px 50px 30px 5px; (el primer valor se aplica a la esquina superior izquierda, el segundo valor se aplica a la esquina superior derecha, el tercer valor se aplica a la esquina inferior derecha y el cuarto valor se aplica a la esquina inferior izquierda)
• Tres valores: border-radius: 15px 50px 30px; (el primer valor se aplica a la esquina superior izquierda, el segundo valor se aplica a las esquinas superior derecha e inferior izquierda y el tercer valor se aplica a la esquina inferior derecha)
• Dos valores: border-radius: 15px 50px; (el primer valor se aplica a las esquinas superior izquierda e inferior derecha, y el segundo valor se aplica a las esquinas superior derecha e inferior izquierda)
• Un valor: border-radius: 15px; (el valor se aplica a las cuatro esquinas, que se redondean por igual

Valor por defecto: 0

Sintaxis JavaScript: object.style.borderRadius="25px"

Sintaxis CSS: border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

Valores de propiedad:

• length Define la forma de las esquinas. El valor predeterminado es 0.
• % Define la forma de las esquinas en %
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-radius: 0;
    </h2>
    <div id="MyDiv"></div>
</div>

#MyDiv {
    background-color: #B87223;
    border-radius: 
        0
        100px
        50px
        10px
        10%
        25%
        50%
        15px 50px 30px 5px
        15px 50px 30px
        15px 50px
        2em 1em 4em / 0.5em 3em
        0 50%
        50% 0
        50px 0%
        0 0 50% 50%
        100% 0% 0% 0% / 100% 0% 0% 0%
        0% 100% 0% 0% / 0% 100% 0% 0%
        0% 0% 100% 0% / 0% 0% 100% 0%
        0% 0% 0% 100% / 0% 0% 0% 100%
        initial
     ;
    height: 200px;
    margin: 1em auto;
    width: 200px;
}

La propiedad border-right es una propiedad abreviada de (en el siguiente orden):

• border-right-width
• border-right-style (necesario)
• border-right-color

Si se omite border-right-color, el color aplicado será el color del texto.

Valor por defecto: medium none color

Sintaxis JavaScript: object.style.borderRight="3px dotted blue"

Sintaxis CSS: border-right: border-width border-style border-color|initial|inherit;

Valores de propiedad:

• border-right-width Opcional. Especifica el ancho del borde derecho. El valor predeterminado es medium
• border-right-style Necesario. Especifica el estilo del borde derecho. El valor predeterminado es none
• border-right-color Opcional. Especifica el color del borde derecho. El valor predeterminado es el color del texto.
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-right: none;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border-right: 
        none
        dotted 2px #FF0000
        dashed 3px #00FF00
        solid 1px #0000FF
        double 5px #FF0000
        groove 10px red
        ridge 10px rgb(189,183,107)
        inset 10px LimeGreen
        outset 10px rgb(255,69,0)
        initial
     ;
    text-align: center;
}

La propiedad border-right-color establece el color del borde derecho de un elemento.

Nota: Declare siempre la propiedad border-style o border-right-style antes de la propiedad border-right-color. Un elemento debe tener un borde antes de poder cambiar el color.

Valor por defecto: black (negro)

Sintaxis JavaScript: object.style.borderRightColor="blue"

Sintaxis CSS: border-right-color: color|transparent|initial|inherit;

Valores de propiedad:

• color Especifica el color del borde derecho. El color predeterminado es el color del elemento.
• transparent Especifica que el color del borde debe ser transparente
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-right-color: black;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border-right: 10px solid;
    border-right-color: 
        black
        transparent
        #FF0000
        #00FF00
        #0000FF
        LimeGreen
        red
        rgb(189,183,107)
        rgb(255,69,0)
        rgba(201, 76, 76, 0.3)
        hsl(89, 43%, 51%)
        hsla(89, 43%, 51%, 0.3)
        initial
     ;
    text-align: center;
}

La propiedad border-right-style establece el estilo del borde derecho de un elemento.

Valor por defecto: none

Sintaxis JavaScript: object.style.borderRightStyle="dotted"

Sintaxis CSS: border-right-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Valores de propiedad:

• none No especifica borde. Esto es por defecto
• hidden Lo mismo que "none", excepto en la resolución de conflictos fronterizos para elementos de tabla
• dotted Especifica un borde punteado
• dashed Especifica un borde discontinuo
• solid Especifica un borde sólido
• double Especifica un borde doble
• groove Especifica un borde acanalado 3D. El efecto depende del valor del color del borde.
• ridge Especifica un borde estriado 3D. El efecto depende del valor del color del borde.
• inset Especifica un borde de inserción 3D. El efecto depende del valor del color del borde.
• outset Especifica un borde de inicio 3D. El efecto depende del valor del color del borde.
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-right-style: none;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border-right: 10px red;
    border-right-style: 
        none
        dotted
        dashed
        solid
        double
        groove
        ridge
        inset
        outset
        initial
     ;
    text-align: center;
}

La propiedad border-right-width establece el ancho del borde derecho de un elemento.

Nota: Declare siempre la propiedad border-style o border-right-style antes de la propiedad border-right-width. Un elemento debe tener bordes antes de poder cambiar el ancho.

Valor por defecto: medium

Sintaxis JavaScript: object.style.borderRightWidth="5px"

Sintaxis CSS: border-right-width: medium|thin|thick|length|initial|inherit;

Valores de propiedad:

• medium Especifica un borde derecho medio. Esto es por defecto
• thin Especifica un borde derecho delgado
• thick Especifica un borde derecho grueso
• length Le permite definir el grosor del borde derecho.
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-right-width: medium;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border-right: solid red;
    border-right-width: 
        medium
        thin
        thick
        10px
        5px
        initial
     ;
    text-align: center;
}

La propiedad border-style establece el estilo de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.

Valor por defecto: none

Sintaxis JavaScript: object.style.borderStyle="dotted double"

Sintaxis CSS: border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Valores de propiedad:

• none No especifica borde. Esto es por defecto
• hidden Lo mismo que "none", excepto en la resolución de conflictos fronterizos para elementos de tabla
• dotted Especifica un borde punteado
• dashed Especifica un borde discontinuo
• solid Especifica un borde sólido
• double Especifica un borde doble
• groove Especifica un borde acanalado 3D. El efecto depende del valor del color del borde.
• ridge Especifica un borde estriado 3D. El efecto depende del valor del color del borde.
• inset Especifica un borde de inserción 3D. El efecto depende del valor del color del borde.
• outset Especifica un borde de inicio 3D. El efecto depende del valor del color del borde.
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-style: none;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 { 
    border: 10px maroon;
    border-style: 
        none
        dotted
        dashed
        solid
        double
        groove
        ridge
        inset
        outset
        dotted solid double dashed
        dotted solid double
        dotted solid
        initial
     ;
    text-align: center;
}

La propiedad border-top es una propiedad abreviada de (en el siguiente orden):

• border-top-width - ancho del borde superior
• border-top-style - estilo borde superior (necesario)
• border-top-color - color del borde superior

Si se omite border-top-color, el color aplicado será el color del texto.

Valor por defecto: medium none color

Sintaxis de JavaScript: object.style.borderTop="3px dashed blue"

Sintaxis CSS: border-top: border-width border-style border-color|initial|inherit;

Valores de propiedad

• border-top-width - Necesario. Especifica el ancho del borde superior. El valor predeterminado es "medium"
• border-top-style - Necesario. Especifica el estilo del borde superior. El valor predeterminado es "none"
• border-top-color - Opcional. Especifica el color del borde superior. El valor predeterminado es el color del texto.
• initial - Establece esta propiedad en su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

Nota: debemos dejar un espacio en blanco entre los valores.

Posibles valores: thin | medium | thick | tamaño (px, pc, pt, mm, cm, in) | nombre del color(inglés) | #xxxxxx | transparent | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

<div>
    <h2>
        Propiedad CSS border <br>
        border-top: none;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border-top: 
        none
        dotted 2px #FF0000
        dashed 3px #00FF00
        solid 1px #0000FF
        double 5px #FF0000
        groove 10px red
        ridge 10px rgb(189,183,107)
        inset 10px LimeGreen
        outset 10px rgb(255,69,0)
        initial
     ;
    text-align: center;
}

La propiedad border-top-color establece el color del borde superior de un elemento.

Nota: Declare siempre la propiedad border-style o border-top-style antes de la propiedad border-top-color. Un elemento debe tener un borde antes de poder cambiar el color.

Valor por defecto: El color actual del elemento.

Sintaxis JavaScript: object.style.borderTopColor="blue"

Sintaxis CSS: border-top-color: color|transparent|initial|inherit;

Valores de propiedad:

• color - Especifica el color del borde superior. El color predeterminado es el color del elemento
• transparent - Especifica que el color del borde debe ser transparente
• initial - Establece esta propiedad en su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS border <br>
        border-top-color: black,
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border-top: 10px solid;
    border-top-color: 
        black
        transparent
        Coral
        #00FF00
        rgb(189,183,107)
        Orange
        rgb(199,21,133)
        hsl(89, 43%, 51%)
        hsla(89, 43%, 51%, 0.3)
        initial
     ;
    text-align: center;
}

La propiedad border-top-left-radius define el radio de la esquina superior izquierda.

Valor por defecto: 0

Sintaxis JavaScript: object.style.borderTopLeftRadius="25px"

Sintaxis CSS: border-top-left-radius: length|% [length|%]|initial|inherit;

Nota: Si establece dos valores, el primero es para el borde superior y el segundo para el borde izquierdo. Si se omite el segundo valor, se copia del primero. Si cualquiera de las longitudes es cero, la esquina es cuadrada, no redondeada.

Valores de propiedad:

• length Define la forma de la esquina superior izquierda.
• % Define la forma de la esquina superior izquierda en %
• initial - Establece esta propiedad en su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-top-left-radius: 0;
    </h2>
    <div id="MyDiv"></div>
</div>

#MyDiv {
    background-color: #B87223;
    border-top-left-radius: 
        0
        100px
        100%
        50px
        50%
        10px
        10%
        50px 15px
        15px 50px
        initial
     ;
    height: 200px;
    margin: 1em auto;
    width: 200px;
}

La propiedad border-top-right-radius define el radio de la esquina superior derecha.

Valor por defecto: 0

Sintaxis JavaScript: object.style.borderTopRightRadius="25px"

Sintaxis CSS: border-top-right-radius: length|% [length|%]|initial|inherit;

Nota: Si establece dos valores, el primero es para el borde superior y el segundo para el borde derecho. Si se omite el segundo valor, se copia del primero. Si cualquiera de las longitudes es cero, la esquina es cuadrada, no redondeada.

Valores de propiedad:

• length Define la forma de la esquina superior derecha.
• % Define la forma de la esquina superior derecha en %
• initial - Establece esta propiedad en su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-top-right-radius: 0;
    </h2>
    <div id="MyDiv"></div>
</div>

#MyDiv {
    background-color: #B87223;
    border-top-right-radius: 
        0
        100px
        100%
        50px
        50%
        10px
        10%
        50px 15px
        15px 50px
        initial
     ;
    height: 200px;
    margin: 1em auto;
    width: 200px;
}

La propiedad border-top-style establece el estilo del borde superior de un elemento.

Valor por defecto: none

Sintaxis de JavaScript: object.style.borderTopStyle="dashed"

Sintaxis CSS border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Valores de propiedad:

• none No especifica borde. Esto es por defecto
• hidden Lo mismo que "none", excepto en la resolución de conflictos fronterizos para elementos de tabla
• dotted Especifica un borde punteado
• dashed Especifica un borde discontinuo
• solid Especifica un borde sólido
• double Especifica un borde doble
• groove Especifica un borde acanalado 3D. El efecto depende del valor del color del borde.
• ridge Especifica un borde ondulado 3D. El efecto depende del valor del color del borde.
• inset Especifica un borde de inserción 3D. El efecto depende del valor del color del borde.
• outset Especifica un borde de inicio 3D. El efecto depende del valor del color del borde.
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-top-style: none;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border-top: 10px #0ba30b;
    border-top-style: 
        none
        dotted
        dashed
        solid
        double
        groove
        ridge
        inset
        outset
        initial
     ;
    text-align: center;
}

La propiedad border-top-width establece el ancho del borde superior de un elemento.

Nota: Declare siempre la propiedad border-style o border-top-style antes de la propiedad border-top-width. Un elemento debe tener bordes antes de poder cambiar el ancho.

Valor por defecto: medium

Sintaxis de JavaScript: object.style.borderTopWidth="5px"

Sintaxis CSS border-top-width: medium|thin|thick|length|initial|inherit;

Valores de propiedad:

• medium Especifica un borde superior medio. Esto es por defecto
• thin Especifica un borde superior delgado
• thick Especifica un borde superior grueso
• length Le permite definir el grosor del borde superior.
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-top-width: medium;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border-top:solid;
    border-top-width: 
        medium
        thin
        thick
        1px
        10px
        initial
     ;
    text-align: center;
}

La propiedad border-width establece el ancho de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.

Nota: Declare siempre la propiedad border-style antes de la propiedad border-width. Un elemento debe tener bordes antes de poder establecer el ancho.

Valor por defecto: medium

Sintaxis de JavaScript: object.style.borderWidth="1px 5px"

Sintaxis CSS border-width: medium|thin|thick|length|initial|inherit;

Valores de propiedad:

• medium Especifica un borde medio. Esto es por defecto
• thin Especifica un borde delgado
• thick Especifica un borde grueso
• length Le permite definir el grosor del borde.
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        border-width: medium;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border:solid;
    border-width: 
        medium
        thin
        thick
        1px
        10px
        initial
        thin medium
        thin medium thick
        thin medium thick 10px
        1px 5px 10px 15px
     ;
    text-align: center;
}

La propiedad box-shadow adjunta una o más sombras a un elemento.

Valor por defecto: none

Sintaxis de JavaScript: object.style.boxShadow="10px 20px 30px blue"

Sintaxis CSS box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

Nota: Para adjuntar más de una sombra a un elemento, agregue una lista de sombras separadas por comas.

Valores de propiedad:

• none Valor por defecto. No se muestra ninguna sombra
• h-offset Necesario. El desplazamiento horizontal de la sombra. Un valor positivo coloca la sombra en el lado derecho del cuadro, un valor negativo coloca la sombra en el lado izquierdo del cuadro
• v-offset Necesario. El desplazamiento vertical de la sombra. Un valor positivo coloca la sombra debajo del cuadro, un valor negativo coloca la sombra sobre el cuadro
• blur Opcional. El radio de desenfoque. Cuanto mayor sea el número, más borrosa será la sombra
• spread Opcional. El radio de propagación. Un valor positivo aumenta el tamaño de la sombra, un valor negativo disminuye el tamaño de la sombra
• color Opcional. El color de la sombra. El valor predeterminado es el color del texto.

Nota: En Safari se requiere el parámetro de color. Si no especifica el color, la sombra no se muestra en absoluto.

• inset Opcional. Cambia la sombra de una sombra exterior (principio) a una sombra interior
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS<br>
        box-shadow: none;
    </h2>
    <div id="MyDiv"></div>
</div>

#MyDiv {
    background-color: #B87223;
    box-shadow: 
        none
        10px 10px black
        inset 10px 10px black
        inset 10px 10px 20px black
        50px 50px black
        50px 50px 5px black
        50px 50px 20px black
        50px 50px 50px black
        50px 50px 50px 5px black
        50px 50px 50px 20px black
        50px 50px 50px 20px red
        50px 50px 50px 20px blue
        50px 50px 50px 20px pink
        40px 40px 50px 20px pink
        20px 20px 50px 20px pink
        10px 10px 50px 20px pink inset
        10px 10px 30px 20px pink inset
        10px 10px 5px 20px pink inset
        10px 10px 5px 10px pink inset
        10px 10px 5px 5px pink inset
        10px 10px 20px 1em #00FF00
        60px -16px teal
        10px 5px 5px black
        3px 3px red, -1em 0 0.4em olive
        0 0 1em gold
        inset 0 0 1em gold
        inset 5px 5px 5px red, 5px 5px 5px red
        initial
     ;
    height: 100px;
    margin: 1em auto;
    width: 200px;
}

La propiedad outline es un contorno es una línea que se dibuja alrededor de los elementos, fuera de los bordes, para hacer que el elemento "destaque".

La propiedad de contorno es una propiedad abreviada para: outline-width, outline-style y outline-color.

Si se omite outline-color, el color aplicado será el color del texto.

Nota: El outline no forma parte de las dimensiones del elemento, por lo tanto, las propiedades de ancho y alto del elemento no contienen el ancho del contorno.

Valor por defecto:medium none color-del-texto

Sintaxis de JavaScript: object.style.outline="#0000FF dotted 5px"

Sintaxis CSS outline: outline-width outline-style outline-color|initial|inherit;

Valores de propiedad

• outline-width - Especifica el ancho del contorno
• outline-style - Especifica el estilo del contorno. (necesario).
• outline-color - Especifica el color del contorno.
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS <br>
        outline: none;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    outline: 
        none
        dotted
        dotted 2px #FF0000
        dashed 3px #00FF00
        solid 1px #0000FF
        double 5px #FF0000
        groove 10px red
        ridge 10px rgb(189,183,107)
        inset 10px LimeGreen
        outset 10px rgb(255,69,0)
        initial
     ;
    text-align: center;
}

Un outline (contorno) es una línea que se dibuja alrededor de los elementos (fuera de los bordes) para hacer que el elemento "destaque".

La propiedad outline-color especifica el color de un contorno.

Nota: Declare siempre la propiedad outline-style antes que la propiedad outline-color. Un elemento debe tener un contorno antes de cambiar su color.

Sintaxis de JavaScript: object.style.outlineColor="#FF0000"

Un outline es una línea alrededor de un elemento. Se muestra alrededor del margen del elemento. Sin embargo, es diferente de la propiedad border.

El outline no es parte de las dimensiones del elemento, por lo tanto, las propiedades de ancho y alto del elemento no contienen el ancho del outline.

Sintaxis CSS outline-color: invert|color|initial|inherit;

Valores de propiedad

• invert Realiza una inversión de color. Esto asegura que el contorno sea visible, independientemente del color de fondo. Esto es predeterminado
• color Especifica el color del contorno.
• initial Establece esta propiedad en su valor predeterminado.
• inherit Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS <br>
        outline-color: black;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    outline:5px dashed;
    outline-color: 
        black
        LimeGreen
        #FF0000
        #0000FF
        rgb(55,69,110)
        rgb(255,69,10)
        rgba(201, 76, 76, 0.3)
        hsl(89, 43%, 51%)
        hsla(89, 43%, 51%, 0.3)
        initial
     ;
    text-align: center;
}

La propiedad outline-offset agrega espacio entre un contorno y el borde o borde de un elemento.

Los contornos difieren de los bordes de tres maneras:

• Un contorno es una línea dibujada alrededor de elementos, fuera del borde fronterizo.
• Un contorno no ocupa espacio.
• Un contorno puede ser no rectangular.

Valor por defecto: 0

Sintaxis: outline-offset: longitud | initial | inherit;

Valores de propiedad:

• longitud: La distancia del contorno es desde el borde de la frontera. El valor predeterminado es 0.
• initial: Establece esta propiedad a su valor predeterminado.
• inherit: Hereda esta propiedad de su elemento padre.

Nota: Internet Explorer no admite la propiedad outline-offset.

<div>
    <h2>
        Propiedad CSS <br>
        outline-offset: black;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    border: 2px solid black;
    outline: 2px solid red;
    outline-offset: 
        0
        5px
        10px
        15px
        20px
        initial
     ;
    text-align: center;
}

Un contorno es una línea que se dibuja alrededor de elementos (fuera de los bordes) para hacer que el elemento se destaque.

La propiedad outline-style especifica el estilo del contorno.

Valor por defecto: none

Un contorno es una línea alrededor de un elemento. Se muestra alrededor del margen del elemento. Sin embargo, es diferente de la propiedad de border.

El contorno no es una parte de las dimensiones del elemento, por lo tanto las propiedades de ancho y altura del elemento no contienen el ancho del contorno.

Sintaxis: outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Valores de propiedad:

• none - Especifica sin contorno. Esto es el predeterminado.
• hidden - Especifica un contorno oculto.
• dotted - Especifica un contorno punteado.
• dashed - Especifica un contorno discontinuo.
• solid - Especifica un contorno sólido.
• double - Especifica un doble contorno.
• groove - Especifica un contorno ranurado en 3D. El efecto depende del color de outline-color.
• ridge - Especifica un contorno estriado en 3D. El efecto depende del color de outline-color.
• inset - Especifica un contorno de inserción 3D. El efecto depende del color de outline-color.
• outset - Especifica un contorno de inicio 3D. El efecto depende del color de outline-color.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS <br>
        outline-style: none;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    outline:5px red;
    outline-style: 
        none
        dotted
        dashed
        solid
        double
        groove
        ridge
        inset
        outset
        initial
     ;
    text-align: center;
}

Un contorno es una línea que se dibuja alrededor de elementos (fuera de los bordes) para hacer que el elemento se destaque.

La propiedad outline-width especifica el ancho de un contorno. Declare siempre la propiedad outline-style antes de la propiedad outline-width. Un elemento debe tener un contorno antes de cambiar el ancho de la misma.

Valor por defecto: medium

Sintaxis: outline-width: medium | thin | thick | longitud | initial | inherit;

Valores de propiedad:

• medium - Especifica un contorno medio. Esto es el predeterminado.
• thin - Especifica un contorno delgado.
• thick - Especifica un contorno grueso.
• longitud - Permite definir el grosor del contorno.
• initial - Establece esta propiedad a su valor predeterminado.
• inherit - Hereda esta propiedad de su elemento padre.

<div>
    <h2>
        Propiedad CSS <br>
        outline-width: medium;
    </h2>
</div>

div { margin: 1em auto; width: 300px; }
h2 {
    outline:dotted red;
    outline-width: 
        medium
        thin
        thick
        3px
        6px
        12px
        20px
        initial
     ;
    text-align: center;
}