Elegant Curved HR with CSS3

May 16, 2012 2:02 pm

Here 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.

Example of final outcome


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