Los bordes definen como dice su palabra los bordes de algún contenido que queremos remarcar. Podemos distinguir varias características para definir el borde.

border-width: Con esta característica definimos el ancho del borde que queremos definir. Además de definir el ancho del borde podemos especificar si queremos indicar la medida a uno de los bordes del contenedor

Valores

  • border-width
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width


Además podemos definir el ancho del borde con palabras ya definidas

Valores

  • thin
  • medium
  • thick


border-color: Especificamos el color del borde. Al igual que la característica anterior podemos especificar que borde del contenedor queremos darle color.

Valores

  • border-color
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color


border-style : Definimos el tipo de borde que queremos darle a nuestro contenedor. Como sucedía en los otros casos podemos especificar algún lado para darle un tipo de estilo diferente.

Valores

  • border-style
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style


Tipo de estilos

  • none
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset


La forma abreviada : <border-width> <border-color> <border-style>

border-radius : nos permite redondear las esquinas de los bordes. Anteriormente que existiera esta característica CSS los diseñadores web tenían que agregar las esquinas redondeadas con imagenes lo que hacía más costoso este diseño redondeado de los bordes.

Podemos definir todos los bordes de igual tamaño en ese caso sólo pondremos una medida de nuestros bordes.

Aunque también se puede definir una medida para cada esquina.

Orden definición bordes

  • superior-izquierda
  • superior-derecha
  • inferior-derecha
  • inferior-izquierda


También se pueden definir con dos valores. En cuyo caso, el primer valor sería para el borde superior-izquierda e inferior-derecha y el otro valor sería para superior-derecha e inferior-izquierda.

Incluso podriamos definir sólo tres valores.En este caso, el primer valor define el borde superior-izquierda, el segundo valor define dos bordes el superior-derecha y el inferior-izquierda y el último valor define el borde inferior-derecha.

Se puede ir más lejos y en vez de usar la forma abreviada podriamos definir cada valor por separado, indicando en cada momento a que lado del borde va asignado.

Definición bordes

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius


Aún se puede rizar más el rizo en el caso de los bordes y es que se pueden crear esquinas asimétricas y no serán circulares, si no elípticas. Si a los bordes anteriormente mencionados le damos dos valores se creará una esquina elíptica. También está la forma abreviada en la cual se tendrá que separar el valor de los radios horizontal y vertical con una barra inclinada.

Recordad que se pueden usar distintas unidades de medida para indicar el tamaño de los bordes que queremos darle.

Códigos de ejemplo

See the Pen border by Bernardo Martin (@bermartinv) on CodePen.



Herramienta para ver como trabajan las características de border.

Tenemos también la propiedad outline, la cual nos dibuja también un borde alrededor de un elemento pero no podemos especificar ninguno de los bordes además no pertenece al modelo de caja por lo que no afectará a la posición del elemento ni a los adyacentes. Se puede definir con su forma abreviada o con cada característica como sucedía con border.

Código de ejemplo

See the Pen outline by Bernardo Martin (@bermartinv) on CodePen.



border-image : Es otra característica que podemos definir a nuestros bordes. Está definido por tres elementos

border-image: url("http://www.norabrowndesign.com/css-experiments/images/border3.png") 30% repeat;
border-image: url("http://www.norabrowndesign.com/css-experiments/images/border3.png") 30 round;
border-image: url("http://www.norabrowndesign.com/css-experiments/images/border3.png") 30 20 15 22 stretch;


Elementos

  • url('dirección de la imagen')
  • medida : se puede poner las cuatro medidas o una. La unidad de medida es % (se puede especificar o no)
  • estilo del borde
    • repeat
    • round
    • stretch
    • space


También se puede especificar de una manera independiente cada característica

Elementos

  • border-image-source: url ('dirección imagen')
  • border-image-width : medida de ancho
  • border-image-outset : especifica la cantidad por la cual el área de imagen de borde se extiende más allá de la caja de borde
  • border-image-repeat : como se repite la imagen sobre el borde (round, repeat, stretch, space)
  • border-image-slice : como se corta la imagen del borde.



Mas informacion :

Especificación w3c border-radius

Especificación w3c border-images