Los diseñadores web a menudo utilizan elementos visuales como líneas y bordes para separar o definir áreas en las páginas web. En esta sección, explorarás dos técnicas de codificación para configurar una línea en una página web: el elemento de línea horizontal HTML (Horizontal rule / hr) y las propiedades de borde (border) y relleno (padding) de CSS.

Elemento Horizontal rule (hr)

Un elemento horizontal rule, hr, separa visualmente las áreas de una página y configura una línea horizontal a través de una página web. Dado que el elemento de línea horizontal no contiene ningún texto, se codifica como una etiqueta vacía y no en un par de etiquetas de apertura y cierre. El elemento horizontal rule tiene un nuevo significado semántico en HTML5, se puede usar para indicar una ruptura temática o un cambio en el contenido.

Ejemplo

Abre un editor de texto y prueba el siguiente código para el elemento hr:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Aprender HTML desde Cero</title>
<meta charset="utf-8">
<style>
body { background-color:#ffffff;
       color:#112735;
       font-family:Arial, Verdana, sans-serif;
}
header { background-color:#0072bc;   
       color:#ffffff;
       font-family:Georgia, "Times New Roman", serif;
} 
h2 { background-color:#0072bc;
     color:#ffffff;
     font-family:Georgia, "Times New Roman", serif;
	 text-align: center; 
}
p { font-size:.90em;
    text-indent: 3em; 
}
ul {font-weight:bold;
}
footer { font-style: italic;
         font-size: .75em; 
}
</style>
</head>
<body>
<h1>hr</h1>
<p>Elemento Horizontal Rule</p>

<hr>

<h1>CSS</h1>
<p>Si bien una línea horizontal se puede crear fácilmente usando HTML, una técnica más moderna para configurar líneas en páginas web es usar CSS para configurar un borde.</p>

<footer>
<hr>
Copyright &copy; 2019 Aprender HTML desde Cero
</footer>

</body>
</html>

Si bien una regla/línea horizontal se puede crear fácilmente usando HTML, una técnica más moderna para configurar líneas en páginas web es usar CSS para configurar un borde.

18 estilos simples para líneas horizontales

A través de Ibrahim Jabbari | Codepen.io.

<br>
<hr class="style1">
<br>
<hr class="style2">
<br>
<hr class="style3">
<br>
<hr class="style4">
<br>
<hr class="style5">
<br>
<hr class="style6">
<br>
<hr class="style7">
<br>
<hr class="style8">
<br>
<hr class="style9">
<br>
<hr class="style10">
<br>
<hr class="style11">
<br>
<hr class="style12">
<br>
<hr class="style13">
<br>
<hr class="style14">
<br>
<hr class="style15">
<br>
<hr class="style16">
<br>
<hr class="style17">
<br>
<hr class="style18">
body{
  background-color: #f0f0f0;
  width: 700px;
  float: center;
}

hr.style1{
	border-top: 1px solid #8c8b8b;
}


hr.style2 {
	border-top: 3px double #8c8b8b;
}

hr.style3 {
	border-top: 1px dashed #8c8b8b;
}

hr.style4 {
	border-top: 1px dotted #8c8b8b;
}

hr.style5 {
	background-color: #fff;
	border-top: 2px dashed #8c8b8b;
}


hr.style6 {
	background-color: #fff;
	border-top: 2px dotted #8c8b8b;
}

hr.style7 {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}


hr.style8 {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}
hr.style8:after {
	content: '';
	display: block;
	margin-top: 2px;
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}

hr.style9 {
	border-top: 1px dashed #8c8b8b;
	border-bottom: 1px dashed #fff;
}

hr.style10 {
	border-top: 1px dotted #8c8b8b;
	border-bottom: 1px dotted #fff;
}


hr.style11 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
    border: 0;
}


hr.style12 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/english/images/hr-12.png) repeat-x 0 0;
    border: 0;
}

hr.style13 {
	height: 10px;
	border: 0;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
}


hr.style14 { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}


hr.style15 {
	border-top: 4px double #8c8b8b;
	text-align: center;
}
hr.style15:after {
	content: '\002665';
	display: inline-block;
	position: relative;
	top: -15px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
}

hr.style16 { 
  border-top: 1px dashed #8c8b8b; 
} 
hr.style16:after { 
  content: '\002702'; 
  display: inline-block; 
  position: relative; 
  top: -12px; 
  left: 40px; 
  padding: 0 3px; 
  background: #f0f0f0; 
  color: #8c8b8b; 
  font-size: 18px; 
}


hr.style17 {
	border-top: 1px solid #8c8b8b;
	text-align: center;
}
hr.style17:after {
	content: '§';
	display: inline-block;
	position: relative;
	top: -14px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	transform: rotate(60deg);
}


hr.style18 { 
  height: 30px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 1px 0 0 0; 
  border-radius: 20px; 
} 
hr.style18:before { 
  display: block; 
  content: ""; 
  height: 30px; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 0 0 1px 0; 
  border-radius: 20px; 
}

¡Inténtalo tú y comparte este artículo con los demás!

5/5 - (5 votos)