CSS (hojas de estilo en cascada) es un lenguaje de hojas de estilo utilizado para diseñar una página web para que sea atractiva. La razón para usar esto es simplificar el proceso de hacer que las páginas web estén presentables. Te permite aplicar estilos en las páginas web. Más importante aún, le permite hacer esto independientemente del HTML que conforma cada página web.
En este artículo, aprenderemos cómo declarar un borde parcial en un cuadro.
¿Propiedad CSS utilizada para proporcionar un borde parcial a un elemento?
No, no hay ninguna propiedad presente en CSS con la ayuda de la cual podamos proporcionar un borde parcial a un elemento, pero podemos lograr esta tarea usando otras propiedades de CSS.
Propiedades utilizadas:
- display : esta propiedad se utiliza para especificar el comportamiento de visualización (el tipo de cuadro de representación) de un elemento.
- margin-left : esta propiedad se utiliza para establecer el margen izquierdo de un elemento.
- margin-right : esta propiedad se utiliza para establecer el margen derecho de un elemento.
- border-bottom : esta propiedad se usa para establecer el estilo del borde inferior para diferentes elementos.
- content : Esta propiedad se usa con elselector ::before y ::after pseudo -elementos, para insertar contenido generado.
- ancho : esta propiedad se utiliza para proporcionar ancho al elemento.
Ejemplo: en el siguiente ejemplo, hemos utilizado las propiedades anteriores para crear un borde parcial alrededor del elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title> Bulma</title>
<link rel="stylesheet"href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<style>
h1 {
display: table;
margin-left: auto;
margin-right: auto;
}
h1:after {
border-bottom: 4px solid red;
content: '';
display: block;
margin-left: 35%;
width: 50%;
}
</style>
</head>
<body>
<center>
<div></div>
<h1 style="color:green;font-size:30px;">
GeeksforGeeks
</h1>
</center>
</body>
</html>
Producción:
