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”

<hr class="oval" />

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.

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;
}

And there you have it.  Simple and to the point.

JSFiddle: http://jsfiddle.net/3n1gm4/vqMHm/

8 Comments


  • Brian
    May 16, 2012 at 5:56 pm
    Permlink

    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
      January 3, 2015 at 3:56 pm
      Permlink

      Alhrgit alright alright that’s exactly what I needed!


  • Desaraev
    November 6, 2012 at 11:38 am
    Permlink

    What about flipping it upside down


    • Brian
      November 6, 2012 at 12:43 pm
      Permlink

      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
    February 13, 2013 at 3:06 pm
    Permlink

    Nice job :)


  • http://www.torontolimodepot.com/
    July 8, 2016 at 2:01 pm
    Permlink

    I have never heard of this site, but I am going to check it out since I always need suggestions of where to purchase clothes for my children. I love your photos!! Thank you for the special discount code, too! xMoxie recently posted..


  • http://www./
    July 11, 2016 at 4:40 am
    Permlink

    posts:Clubbing Navy SEALs Last week,Fox News reported a jaw-dropping story about how…Girl Scouts Refers Girls To Media Matters To Clear Up ‘Media Misinformation’ In 2010,the Girl Scouts of the USA published

Leave a Reply

Your email address will not be published. Required fields are marked *