La propiedad de borde se usa para crear un borde alrededor de un elemento y define cómo debe verse. Hay tres propiedades de la frontera.
propiedad de estilo de borde:
Esto define cómo debe verse el borde. Puede ser sólido, discontinuo, desplazado, etc. Se permiten los siguientes valores.
- punteado: un borde punteado
- discontinuo: un borde discontinuo
- sólido: un borde sólido
- doble: un borde doble
- surco: borde ranurado A3D.
- ridge: Un borde con estrías en 3D.
- recuadro: un borde insertado en 3D.
- salida: un borde de salida 3D.
- ninguno: un estilo sin borde
- hidden: Un borde oculto.
Ejemplo :
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<!-- Adding some CSS -->
<style>
h1{
margin: auto;
padding: 10px;
color: green;
margin-top: 220px;
font-size: 48px;
width: fit-content;
/* Border */
border-style: dashed;
}
</style>
<body>
<h1>GeeksForGeeks</h1>
</body>
</html>
Producción:
borde discontinuo
Del mismo modo, podemos usar cualquier estilo de la lista anterior según nuestra elección. Podemos cambiar individualmente el estilo de la parte inferior, izquierda, derecha y superior del borde.
Ejemplo: en el código HTML anterior, simplemente cambie la hoja de estilo del borde como se indica a continuación.
border-bottom-style : dashed; border-left-style: solid; border-right-style: double; border-top-style: dotted;
Producción:
propiedad border-width: esta propiedad se utiliza para definir el ancho de todos los bordes. El ancho puede ser de cualquier tamaño (en px, pt, cm, em, etc.) o usando valores predefinidos: fino, medio o grueso .
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<!-- Adding some CSS -->
<style>
h1{
margin: auto;
padding: 10px;
color: green;
margin-top: 220px;
font-size: 48px;
width: fit-content;
/* Border */
border-style: solid;
border-width: 5px;
}
</style>
<body>
<h1>GeeksForGeeks</h1>
</body>
</html>
Producción :
propiedad de color de borde:
Esta propiedad se utiliza para cambiar el color de los cuatro bordes. Cambie o agregue lo siguiente en el código HTML anterior en la sección de estilo.
border-color : green; border-top-color: black; border-bottom-color: yellow;
Producción:
Taquigrafía de borde:
Podemos definir todas las propiedades anteriores en una sola propiedad, border .
Sintaxis:
border: (border-width) (border-style) (border-color);
Ejemplo :
border: 5px dotted red;
Producción:
Bordes redondeados:
La propiedad border-radius se usa para agregar bordes redondeados. Cambie el código HTML anterior con la siguiente sintaxis.
Ejemplo:
border: 5px solid red; border-radius : 15px;
Producción:
Publicación traducida automáticamente
Artículo escrito por hritikrommie y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA