La propiedad border-block-end en CSS se usa para definir los valores de propiedad de borde de bloque lógico individual en un solo lugar en la hoja de estilo. Esta propiedad coloca el borde en la parte inferior del elemento definidor.
Sintaxis:
border-block-end: border-width|border-style|border-color;
Valores de propiedad:
- border-width: este valor de propiedad contiene el ancho de la propiedad.
- border-style: esta propiedad contiene el estilo del 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-end en el CSS:
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS | border-block-end Property</title>
<style>
h1 {
color: green;
}
div {
background-color: yellow;
width: 220px;
height: 40px;
}
.one {
border-block-end: 5px solid yellow;
background-color: purple;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS | border-block-end Property</b>
<br><br>
<div class="one">A Computer Science Portal</div>
</center>
</body>
</html>
Producción:
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS | border-block-end Property</title>
<style>
h1 {
color: green;
}
div {
background-color: yellow;
width: 220px;
height: 40px;
}
.one {
border-block-end: medium dashed yellow;
background-color: purple;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS | border-block-end 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-end se enumeran a continuación:
- cromo 69
- Firefox 41
- Ópera 56
- Borde 79
- Safari 12.1
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA