CODEWITHSUNDEEP
htmlcsstwitter-bootstrapless
Ryan
Ryan

Reputation: 15270

How can I add outer rounded corners to a div?

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

Upvotes: 7

Views: 24476

Answers (5)

What have you tried
What have you tried

Reputation: 11148

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

Upvotes: 13

apaul
apaul

Reputation: 16170

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

Upvotes: 2

Magnus Magnusson
Magnus Magnusson

Reputation: 1494

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

Upvotes: 3

Jude Duran
Jude Duran

Reputation: 2205

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

Upvotes: 1

beebee
beebee

Reputation: 300

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

Upvotes: 2

Related Questions