CSS le permite crear bordes personalizados utilizando las propiedades border-width, border-style y border-color. De los tres, sólo se requiere la propiedad border-style. Usted puede mezclar y combinar propiedades de borde en la forma que desee. Sin embargo, su borde personalizado debe, al menos, definir un estilo de borde en la definición. Al crear un borde personalizado, puede definir cada propiedad para cada lado de forma individual, o utilizar una propiedad resumida para definir todos los valores de la frontera en una línea. Utilice clases CSS para crear varios bordes personalizados que usted puede aplicar a cualquier elemento en sus archivos HTML.
Instrucciones
1
Abra el archivo CSS y escriba lo siguiente:
.borderone {
border-width: 1px;
border-style: sólido;
border-color: púrpura;
}
Esto crea una clase que hace que un borde, color púrpura que es un píxel de grosor.
2
Escriba lo siguiente:
.bordertwo {
border-width: grueso;
border-style: doble;
}
Esta clase utiliza el valor de espesor predefinido para el ancho en lugar de proporcionar un tamaño en píxeles. También puede utilizar "delgada" o "medio".
3
Escriba lo siguiente:
.borderthree {
border-style: punteado sólido;
border-color: rojo amarillo;
}
Esta clase utiliza dos valores cada una de las propiedades de estilo y de color, alternando los dos entre el lado izquierdo superior, derecho, inferior y. En este ejemplo, los lados superior e inferior de la frontera están salpicadas y rojo, mientras que los lados derecho e izquierdo son sólidos y amarillo.
4
Escriba lo siguiente:
.borderfour {
border-top-width: 10px;
top border-style: corrió;
border-top-color: blue;
border-right-width: 15px;
frontera-estilo correcto: doble;
border-right-color: amarillo;
border-bottom-width: 3px;
frontera-estilo abajo: salpicado;
border-bottom-color: red;
border-left-width: 1px;
-estilo izquierda frontera: sólido;
border-left-color: green;
}
Esta clase define cada posible propiedad border separado, utilizando un ancho, estilo y color diferente para cada lado de la frontera.
5
Escriba lo siguiente:
.borderfive {
frontera: 3px sólido negro;
}
Esta clase utiliza la propiedad border taquigrafía para definir cada atributo border en una propiedad y aplica los mismos valores a cada lado de la frontera. El border-style se implica como parte de la propiedad. Esta propiedad le requiere para definir las propiedades en el ancho, estilo, orden de los colores, pero puede omitir el ancho y el color si usted no desea definirlos.
6
Guarde el archivo CSS.