hr tags CSS Tips and Tricks Style

/* Gradient color1 - color2 - color1 */ hr.style-one { border: 0; height: 1px; background: #333; background-image: linear-gradient(to right, #ccc, #333, #ccc); }


/* Gradient transparent - color - transparent */ hr.style-two { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }


/* Double-color dashed line */ hr.style-three { border: 0; border-bottom: 1px dashed #ccc; background: #999; }


/* Single-direction drop shadow */ hr.style-four { height: 12px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5); }


/* Cloud */ hr.style-five { border: 0; height: 0; /* Firefox... */ box-shadow: 0 0 10px 1px black; } hr.style-five:after { /* Not really supposed to work, but does */ content: "\00a0"; /* Prevent margin collapse */ }


/* Inset, by Dan Eden */ hr.style-six { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }



/* Flaired edges, by Tomas Theunissen */ hr.style-seven { height: 30px; border-style: solid; border-color: black; border-width: 1px 0 0 0; border-radius: 20px; } hr.style-seven:before { /* Not really supposed to work, but does */ display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: black; border-width: 0 0 1px 0; border-radius: 20px; }



/* Glyph, by Harry Roberts */ hr.style-eight { padding: 0; border: none; border-top: medium double #333; color: #333; text-align: center; } hr.style-eight:after { content: "§"; display: inline-block; position: relative; top: -0.7em; font-size: 1.5em; padding: 0 0.25em; background: white; }