CSS Default Values For HTML Elements - hr Example

<!DOCTYPE html>
<html>
<head>
<style>
/*
==============(hr)==============
*/
hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}
/*
==============(hr)==============
*/
</style>
</head>
<body>
<h1>CSS Default Value For <kbd>(hr)</kbd></h1>
<div class="content">
<p>By default, "hr" element is displayed like this:</p>

<hr>
A line represents an hr element.
<hr>

<h2>Default CSS Properties</h2>
<pre class="default">
hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}
</pre>
</div>

<!--============= End =============-->
<script>
var h=document.querySelector("h1");h.style.padding="30px",h.style.background="#333",h.style.color="#fff",h.style.boxShadow="0 0 3px 0 #aaa",h.style.borderTopLeftRadius="5px",h.style.borderTopRightRadius="5px";var k=document.querySelectorAll("h1 kbd");k.forEach(function(e){e.style.color="#0f0"});var c=document.querySelector(".content");c.style.cssText="background:#f8f9fa;box-shadow:0 0 3px 0 #aaa;border-bottom-left-radius:5px;border-bottom-right-radius:5px;padding:20px 30px;margin-top:-22px";var p=document.querySelector(".default");p.style.cssText="background:#fefefe;box-shadow:inset 0 0 3px 0 #aaa;border-left:5px solid #333;padding:10px";
</script>
</body>
</html>