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
- hidden
- 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 :