Las propiedades de borde CSS nos permiten establecer el estilo, el color y el ancho del borde.
Nota: Se pueden establecer diferentes propiedades para todos los diferentes bordes, es decir, borde superior, borde derecho, borde inferior y borde izquierdo.
Propiedades de los bordes CSS:
- Propiedad de estilo de borde superior CSS
- Propiedad de estilo border-right
- Propiedad de estilo de borde inferior
- Propiedad de estilo border-left
- Propiedad border-top-width
- Propiedad border-right-width
- Propiedad border-bottom-with
- Propiedad border-left-width
- Propiedad border-top-color
- Propiedad border-right-color
- Propiedad border-bottom-color
- Propiedad border-left-color
4. Bordear lados individuales
1. Estilo de borde : la propiedad de estilo de borde especifica el tipo de borde. Ninguna de las otras propiedades de borde funcionará sin establecer el estilo de borde.
Los siguientes son los tipos de bordes:
- dotted – Describe un borde punteado
- dashed – Describe un borde discontinuo
- solid – Describe un borde sólido
- double – Describe un borde doble
- surco: describe un borde ranurado en 3D.
- ridge: describe un borde con estrías en 3D.
- recuadro: describe un borde insertado en 3D.
- comienzo: describe un borde inicial en 3D.
- ninguno: no describe ningún borde
- hidden – Describe el borde oculto
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {
border-style: dotted;
}
p.dashed {
border-style: dashed;
}
p.solid {
border-style: solid;
}
p.double {
border-style: double;
}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>Geeksforgeeks</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
</body>
</html>
Producción:
2. Ancho del borde : el ancho del borde establece el ancho del borde. El ancho del borde puede ser en px, pt, cm o fino, medio y grueso.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-width: 8px;
}
</style>
</head>
<body>
<p>
Geeksforgeeks
</p>
<p>
Border properties
</p>
</body>
</html>
Producción:
3. Color del borde : esta propiedad se utiliza para establecer el color del borde. El color se puede configurar usando el nombre del color, el valor hexadecimal o el valor RGB. Si no se especifica el color, el borde hereda el color del propio elemento.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-color: red
}
</style>
</head>
<body>
<p>
Geeksforgeeks
</p>
<p>
Border properties:color
</p>
</body>
</html>
Producción:
4. Bordear lados individuales: Usando la propiedad de borde, podemos proporcionar ancho, estilo y color a todos los bordes por separado, para eso tenemos que dar algunos valores a todos los lados del borde.
Sintaxis:
border-top-style : dotted; border-bottom-width: thick; border-right-color: green; etc.
Ejemplo: En este ejemplo, configuramos el estilo de la parte superior del borde como punteado en h2.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-top-style: dotted;
}
</style>
</head>
<body>
<h2>Welcome to GeeksforGeeks</h2>
</body>
</html>
Producción:
Más ejemplos en el borde CSS:
Ejemplo: En este ejemplo, usamos estilo de borde, propiedad de estilo de borde en la etiqueta p.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid dashed dotted double;
border-color: red;
}
</style>
</head>
<body>
<p>Geeksforgeeks</p>
<p>
Border properties:color
</p>
</body>
</html>
Producción:
Sintaxis: si las propiedades del borde tienen 3 valores, entonces:
border-style: solid dotted double Solid:top border Dotted: Left and right border Double: bottom border
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid dashed dotted;
border-color: blue;
}
</style>
</head>
<body>
<p>Geeksforgeeks</p>
<p>
Border properties:color
</p>
</body>
</html>
Producción:
Sintaxis: si las propiedades del borde tienen 2 valores
border-style:solid dotted Solid:top and bottom border Dotted: right and left border
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid dashed;
border-color: blue;
}
</style>
</head>
<body>
<p>Geeksforgeeks</p>
<p>
Border properties:color
</p>
</body>
</html>
Producción:
Sintaxis: si las propiedades del borde tienen 1 valor
border-style:dotted Dotted:top, bottom, left and right border
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-color: green;
}
</style>
</head>
<body>
<p>Geeksforgeeks</p>
<p>
Border properties:color
</p>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome 1 y superior
- Internet Explorer 4 y superior
- Firefox 1 y superior
- Ópera 3.5 y superior
- Safari 1 y superior
Publicación traducida automáticamente
Artículo escrito por SrishtiGoel y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA