How to get multiple bottom only borders on a circle


Tags: css,border,box-shadow

Problem :

I have 2 divs with some content. One "box" and one "circle" now I want to make them look like one figure only. Something like a box with a circled part at the bottom center. Hard to explain it in words I guess showing up some code is way better.

The markup:

<div class="box">content</div>
<div class="circle">content</div>

The CSS:

.box {
    width: 500px;
    height: 700px;
    margin: 0 auto;
    background: green;
    border: 1px solid blue;
}

.circle {
    width: 100px;
    height: 100px;
    margin: -50px auto 0 auto;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 0 10px green,
                            0 0 0 11px blue;
}

Now I want to cut off the upper part of the circle's border(shadow). Anyone knows how to get this done? Perhaps there's also another (better) way to do this?

Thanks a lot



Solution :

I am not completly sure if I exactly understood what it should look like. What I did is that I only drew half of the circle and then masked out the upper blue line of the border shadow.

I also found another stackoverflow question here that solves a similar problem.

    .box {
        width: 500px;
        height: 700px;
        margin: 0 auto;
        background: green;
        border: 1px solid blue;
    }

    .circle {
        width: 100px;
        height: 50px;
        margin: 10px auto 0 auto;
        background: white;
        border-radius:0 0 100px 100px;
        box-shadow: 0 0 0 10px green, 0 0 0 11px blue;
    }

    .mask {
        position:absolute;
        width:120px;
        height: 1px;
        background-color:green;
        left:50%;
        right:50%;
        transform:translateX(-50%);
        top:709px;
    }
    <div class="mask"></div>
    <div class="box">content</div>
    <div class="circle">content</div>


    CSS Howto..

    How to create rounded shapes with css or SVG

    How do I make the rest of the page fade to black once my div loads and fade out once the div is closed?

    How can I specify relative positioning in HTML?

    outlook.com how to target css at a specific class

    How to create a margin between two seperate divs?

    How can I escape string css in sass/scss?

    Normalized CSS, option in JSFiddle, how to add it to document

    How to position a div to be visible but not count towards document width

    How to slide an element without removing it from DOM ( A psudo slide maybe)?

    css, how to stop an element being squashed by container

    How to not display css padding when span element is empty

    CSS how to target background and make it transparent

    HTML DIV Overflowing, How To Stop?

    How to optimize my css/html webpage? [closed]

    How to correctly style drop-down menu

    How to embed link HTML into CSS file for menus?

    How do I set jQuery accordion default to unopened? And toggle open/closed?

    How to Apply CSS to element added by Javascript

    Adding css resource to a QuickTip in ExtJS not showing

    My sidebar is fixed no matter what. How do I make scrolling possible with the sidebar?

    How to fix this css error in IE7 and lower?

    How to create CSS3 bounce effect with PURE CSS

    How do I align tables with HTML?

    jQuery - How to improve the logic for toggling inline css and class name while clicking activated buttons and hovering non-activated buttons?

    CSS: How to say .class:last-of-type [classes, not elements!] [duplicate]

    How to center dropdown menu under parent tab?

    how to make full css container

    CSS3: How to add more than 2 CSS Ribbon effects to same banner?

    How can I explain to a programmer that CSS positioning has many benefits over table based layouts?

    How to do like this list using
  • and CSS?