Elegant Curved HR with CSS3
May 16, 2012 2:02 pmHere is some simple CSS3 to create a clean and elegant HR, it does not necessarily degrade the best, but its not too bad. This was mainly an exercise in CSS3 for me. So lets get to it.
The html, just a basic <hr> element with a class of (whatever you’d like) “oval”
[markdown]
“`html
“`
[/markdown]
And then the CSS, pretty straight forward. I’m using the :before to set up the base curve of the hr. You can edit the border radius to increase or decrease the amount curve to suite you liking. Then the :after to mask off the shadow.
[markdown]
“`css
hr.oval {
position: relative;
width: 100%;
height: 50px;
overflow: hidden;
margin: 0px auto;
border: 0;
}
hr.oval:before {
content: ”;
width: 90%;
height: 30px;
left: 5%;
position: absolute;
z-index: 50;
/* Edit these radiuses to change the overall curvature. Duplicate in :after */
border-bottom-left-radius: 1000px 70px;
border-bottom-right-radius: 1000px 70px;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, .35);
}
hr.oval:after {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
z-index: 100;
border-bottom-left-radius: 1000px 70px;
border-bottom-right-radius: 1000px 70px;
background: #fff;
}
“`
[/markdown]
And there you have it. Simple and to the point.
JSFiddle: http://jsfiddle.net/3n1gm4/vqMHm/
6 Comments
Brian
Joshuanhibbet over on css-tricks.com had a good idea with using percentages for the border radiuses for a bit more flexibility.
http://css-tricks.com/forums/discussion/comment/69686#Comment_69686
Donyell
Alhrgit alright alright that’s exactly what I needed!
Desaraev
What about flipping it upside down
Brian
That would be as simple as switching “border-bottom-xxxx-radius” to “border-top-xxxx-radius” and shifting the :before and :after elements down 20px.
See here: http://jsfiddle.net/3n1gm4/LXDzc/
Johnson
Nice job 🙂