CODEWITHSUNDEEP
htmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6509

Why thinning border on CSS Oval shape?

Can someone explain why the oval shape thins at the side instead of a consistent 1px border?

Here's my Fiddle: https://jsfiddle.net/p9hynbrb/

And my code:

    button {
        font-size: 1em;
        background: #fff;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border: 1px solid #1588cb;
        color: #1588cb;
        font-weight: 400;
        height: 60px;
        width: 300px;
        position: relative;
        margin: 25px 0 50px 0;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        -o-box-sizing: content-box;
        box-sizing: content-box;
    }

    .full-circle {
        display:block;
        border-bottom: 1px solid #1588cb;
        width: 45px;/*
        -moz-border-radius: 45px / 36px;
        -webkit-border-radius: 45px / 36px;*/
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        -o-box-sizing: content-box;
        box-sizing: content-box;
        border-radius: 45px / 38px;
        height: 41px;
        background: #fff;
        position: absolute;
        left: 50%;
        margin-left: -17px;
        bottom: -17px;
        line-height: 50px;
    }
    <button>News<span class="full-circle">+</span></button>

Upvotes: 0

Views: 207

Answers (1)

Jack
Jack

Reputation: 9388

Because you've only specified the bottom-border. The browser is handling the transition from 1px to 0px, which results in the tapered edges. If you define

border: 1px solid transparent;

as well, you'll see that the edges are now solid to the end (https://jsfiddle.net/p9hynbrb/4/)

However, the desired effect is lost because the bottom border no longer aligns properly (border-left and border-right are intersecting as seen here more clearly)

One workaround you could do (if keeping the shape is important) is to apply a 1px border around the span, but then apply a mask over the border you want to hide.

Something like this: https://jsfiddle.net/p9hynbrb/1/

Or this: https://jsfiddle.net/p9hynbrb/5/

Both, unfortunately, require mark up changes (to either push the "+" above the mask - the first fiddle, or to move the "+" into the generated content - the second...)

Upvotes: 3

Related Questions