How can I add outer rounded corners to a div?

html css twitter-bootstrap less

22,439

Solution 1

Css3 offers the border-radius property. However, please note that this is not available for IE8 or any version lower. There are available hacks; but they are just that: hacks.

Usage looks like this:

    .sidebar {
        background-color:gray;
        width:30%;
        height:300px;
    }
    .middle {
        background-color:gray;
    }
    .top,.middle,.bottom {
        width:100%;
        height:100px;
        display:block;
    }
    .top{
        background: white;
        border-bottom-right-radius:10px;
    }
    .bottom{        
        background: white;
        border-top-right-radius: 10px;
    }

jsFiddle example

Solution 2

If I understand you correctly you're looking for an inverted border radius. Is this what you have in mind?

http://jsfiddle.net/3pW2M/

This will not work if the white area needs to be transparent to show a background image for instance.

.top {
    position: relative;
}

.topcorner {
    position: absolute;
    margin: 0;
    bottom: 0;
    right: 0;
    height: 50px;
    width: 50px;
    background: gray;
}

.topcorner:after {
    content: '';
    position: absolute;
    height: 50px;
    width: 50px;
    background: white;
    border-radius: 0 0 50px 0;
}

Solution 3

I'm assuming that this will be needed for some sort of user interaction, navigation, tabs, ext. So I set it up on a jquery hover function- jsFiddle

$(document).ready(function () {
  $('.top').hover(function () {
    $('.middle').toggleClass('notSelect2');
    $('.bottom').toggleClass('notSelect3');
  });

  $('.middle').hover(function () {
    $('.top').toggleClass('notSelect');
    $('.bottom').toggleClass('notSelect2');
  });

  $('.bottom').hover(function () {
    $('.middle').toggleClass('notSelect');
    $('.top').toggleClass('notSelect3');
  });
});

Solution 4

you may use border-radius of CSS. you can see an online round border generator here: http://border-radius.com/

Solution 5

Use the CSS3 border-radius.

  .top
     {
       border-bottom-right-radius: 3px;
       -moz-border-radius-bottomright: 3px;
       -webkit-border-bottom-right-radius: 3px;
     }

 .bottom
    {
      border-top-right-radius: 3px;
      -moz-border-radius-topright: 3px
      -webkit-border-top-right-radius: 3px;
    }

View more solutions

22,439

Author by

Ryan

BY DAY: Ninja. BY NIGHT: Ninja. FOR FUN: "If you see scary things, look for the helpers-you'll always see people helping."-Fred Rogers

Updated on July 09, 2022

Comments

Ryan almost 2 years

I'm looking to add "outer" rounded corners to the selected sidebar item to give the effect that this item is "pouring" into the content well.

In my example below, I'd like the .top to have a rounded bottom-right corner with a gray background, along with a similar top-right corner for the .bottom. What do you think?

I'm using Twitter Bootstrap and LESS, if that makes it easier.

jsFiddle: http://jsfiddle.net/3YXb2/

Turn this:

rendered

Into this:

enter image description here

Markup:

<div class="wrapper">
    <div class="sidebar">
        <div class="top">
            <p>Top</p>
        </div>
        <div class="middle">
            <p>Middle</p>
        </div>
        <div class="bottom">
            <p>Bottom</p>
        </div>
    </div>
    <div class="container">
        <p>Content</p>
    </div>
</div>

CSS:

body {
    margin:10px;
}
div {
    margin:0;
    margin-right:-4px;
    padding:0;
    display:inline-block;
    vertical-align:middle;
}
.wrapper {
    width:100%;
    display:block;
    border:1px solid;
}
.container {
    background-color:gray;
    width:70%;
    height:300px;
}
.sidebar {
    background-color:white;
    width:30%;
    height:300px;
}
.middle {
    background-color:gray;
}
.top,.middle,.bottom {
    width:100%;
    height:100px;
    display:block;
}
p {
    padding:40px 0 0;
    margin:0;
    text-align:center;
}

Ryan about 11 years

But how do I select the color of the background of the corner?
Ryan about 11 years

Yes, I've been playing with the .border-top-right-radius(10px); mixin in bootstrap but I can't figure out how to make the background of the "empty" corner the same as .middle in my example.
beebee about 11 years

I am not sure what you mean by the background of the corner. It would be the same color as "background-color" if you want you can drop a shadow by box-shadow property.
Ryan about 11 years

So if I add a border radius to the .top div above, it will round the corner of the already white div. But I need the corner to be gray. and the rest white. Where the gray looks part of the .middle.
What have you tried about 11 years

@Ryan You would just have a wrapper sitting behind everything - let me try to make you an example using your code.
beebee about 11 years

you can do a couple of things. If underneath the top div you have a same size div with grey background, the corner will appear as gray. Another option would be making the content as the container div and put other top middle and bottom on top of it. that way, the corner would appear as grey too.
What have you tried about 11 years

@Ryan the latest update should do exactly what you want. If not feel free to let me know, but that should do the trick :)
Ryan about 11 years

Yes! This is what I'm looking for. I'll play around with this to make sure, but this just might work! Thanks.
Ryan about 11 years

nice work! Slick use of sidebar background. Will see if I can get this working in production. Thanks.
Ryan about 11 years

Yes, will do. Just trying to make it work in production first. Soon.
What have you tried about 11 years

let us continue this discussion in chat
Stanislav Kvitash almost 5 years

That;s really great answer! Thanks! But what if we need to fill white with some king of gradient or image background?