Aplicando un borde
Al momento de aplicar un borde debemos tener en cuenta 3 atributos muy importantes, estos son:
- border-width: inicializa el ancho del borde.
- border-style: inicializa el estilo para dibujar el borde.
- border-color: inicializa el color del borde.
<!DOCTYPE HTML> <html> <head> <title>Example</title> <style type="text/css"> p { border-width: 5px; border-style: solid; border-color: black; } </style> </head> <body> <p> There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By the time we add the countless types of apples, oranges, and other well-known fruit, we are faced with thousands of choices. </p> </body> </html>
Para definir el ancho del borde podemos trabajar en base a 3 medidas, por unidades de medida como pixels, cm, em; por porcentajes y por valores preseteados como por ejemplo, thin, médium y thick.
Tipos de borde
El tipo de borde lo definimos con el estilo, para ello tenemos las siguientes opciones:
- none
- dashed
- dotted
- double
- groove
- inset
- outset
- ridge
- solid
Existe la posibilidad también de aplicar un borde y un estilo a cada uno de los lados del elemento, para ello utilizaremos las siguientes instrucciones:
[color=#d3d3d3]border-top-width
border-top-style
border-top-color[/color]
border-bottom-width
border-bottom-style
border-bottom-color
[color=#d3d3d3]border-left-width
border-left-style
border-left-color[/color]
[color=#d3d3d3]border-right-width
border-right-style
border-right-color[/color]
Donde top se refiere a la parte superior, bottom a la inferior, left a la izquierda y right a la derecha.
Con ello inclusive podemos lograr combinaciones de tipos de bordes en un mismo elemento.
Veamos un ejemplo de esto último:
<!DOCTYPE HTML> <html> <head> <title>Example</title> <style type="text/css"> p { border-width: 5px; border-style: solid; border-color: black; border-left-width: 10px; border-left-style: dotted; border-top-width: 10px; border-top-style: dotted; } </style> </head> <body> <p> There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By the time we add the countless types of apples, oranges, and other well-known fruit, we are faced with thousands of choices. </p> </body> </html>
El código nos da como resultado lo siguiente:
Border Radius
Para crear los bordes redondeados podemos utilizar la propiedad radius que nos permite indicar el radio de curvatura del borde.
Veamos cómo implementarlo el código:
<!DOCTYPE HTML> <html> <head> <title>Example</title> <style type="text/css"> p { border: medium solid black; border-top-left-radius: 20px 15px; }</style> </head> <body> <p> There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By the time we add the countless types of apples, oranges, and other well-known fruit, we are faced with thousands of choices. </p> </body> </html>
Esto nos da como resultado la siguiente pantalla:
Con esto concluimos este tutorial sobre estos elementos, ya podemos incorporar mejoras sobre nuestros CSS sin mucho esfuerzo y con herramientas de vanguardia tecnológica.