Creating a droplet like border effect in css

Question

I created this border design in Photoshop and was wondering if anyone could give me some guidance with how to recreate this using css.

Answer 1

In addition to @Harry's answer - (which is probably the best way to approach this)...

We could also achieve this effect using the webkit text-stroke property by setting a thick stroke on a character such as '0'.

We can fine-tune this effect by changing the stroke thickness and the font-size of the character.

div{
    position: relative;
    height: 75px;
    width: 100%;
    border-bottom: 20px solid black;
    background: #EEE;
    padding-top: 10px;
}
div:after{
    position: absolute;
    content: '00000000000000000000000000000000000000000000000000000000000';
    font-size: 30px;
    -webkit-text-stroke: 10px black;
    text-stroke: 10px black;
    bottom:-35px;
    left:0;
    width: 100%;
    overflow:hidden;
}

Lorem Ipsum Dolor Sit Amet