La propiedad de bloque de borde en CSS se usa para establecer los valores de propiedad de borde de bloque lógico individual en un solo lugar en la hoja de estilo. Establece el borde superior e inferior del elemento definidor.
Sintaxis:
border-block: border-width|border-style|border-color;
Valores de propiedad:
- border-width: este valor de propiedad contiene el ancho de la propiedad.
- estilo de borde: esta propiedad contiene el estilo de borde que puede ser discontinuo, sólido, etc.
- border-color: esta propiedad contiene el color del borde.
Los siguientes ejemplos ilustran la propiedad border-block en el CSS:
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>CSS | border-block Property</title>
<style>
h1 {
color: green;
}
div {
background-color: yellow;
width: 220px;
height: 40px;
}
.one {
border-block: 5px solid yellow;
background-color: purple;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS | border-block Property</b>
<br><br>
<div class="one">A Computer Science Portal</div>
</center>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>CSS | border-block Property</title>
<style>
h1 {
color: green;
}
div {
background-color: yellow;
width: 220px;
height: 40px;
}
.one {
border-block: 5px dashed yellow;
background-color: purple;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS | border-block Property</b>
<br><br>
<div class="one">A Computer Science Portal</div>
</center>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad border-block se enumeran a continuación:
- Firefox
- Ópera
- Borde
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA