JonMifsud
Web Developer & Consultant

Inverse Border Radius in CSS

14 July 2012

With all the buzz around CSS and all the things you could do without the use of images, plenty have wondered how to handle inverse border-radius in CSS, Or an inverse-circle using CSS. In this tutorial I will show how one can create an inverse border-radius effect using CSS.

It is important to note that this use-case might not be so intuitive and might be hard to adapt into certain situations. I will be using an inverse border-radius effect to tabbed list. Where the list will feature an inverse circle effect on the right-hand side. (Note this only works on Modern Browsers)

Below find a sample HTML block from a single list item. The a tag is not required it is only used because in this case we are tackling a tabbed list which is most likely to be made up of links. Note that we are adding an extra span inside the link to provide the inverse circle effect later.

              <li>
    <a href='#'>Tab Item<span></span></a>
</li>

            

Below is the accompanying CSS style-sheet. Note that I have removed the gradients to make this easier to understand. I will further explain the tricks later on.

              ul#tabs li{
    float:left;
    list-style:none;
}
ul#tabs li a {
    display: block;
    float: left;
    color: white;
    font-weight: bold;
    position: relative;
    background:#635f87;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-bottom: 5px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
}
ul#tabs li a span {
    content: '';
    pointer-events:none;
    z-index: 1;
    position: absolute;
    height: 31px;
    width: 30px;
    overflow:hidden;
    right:-30px;
    top:0;
}
ul#tabs li a span:after {
    content: '';
    z-index: 1;
    position: absolute;
    margin-left: -10px;
    margin-top:-11px;
    height: 32px;
    width: 30px;
    background: transparent;
    border: solid 10px #2b2657;
    border-bottom-left-radius: 30px;
}

            

So how does this Inverse Border-Radius technique work?

The technique is quite simple - we are adding an absolute positioned span just behind the list-item. The positioning can be switched to relative if adjusted accordingly, absolute was preferred so that list-items are touching each other. The span had pre-set height to match the height of the other items and enough width to create the desired effect. It is important to note the overflow:none property as this is used to hide the 'extra' stuff being used to create the effect.

The magic is then done via the :after selector. This is added to provide the inverse-border-radius effect, the trick is to use a normal border-radius and set the background: transparent so the item has no colour. However we add a very thick border of 10px in this case to create a circle effect. We are however only interested to the 'inside' of this circle thus using margins we move the border and hide the use-less corners keeping only the inverse border radius visible.

The below shows the border, used to create the inverse border-radius.

Hope that this example makes it easier to understand how one can create an inverse border-radius using just CSS, and hope that you enjoyed this simple tutorial. If you still have questions feel-free to contact me.

Written by Jonathan Mifsud

Jonathan Mifsud is a web developer by day and an SEO enthusiast by night. He provides freelance web development and consultancy services and is available for hire. You can get in touch with him on twitter and Google+

Comments

Leave a Comment
Shane Thompson

Great work! Doesn't seem to work with transitions, however otherwise awesome.

Reply

25 Nov 2013 @11:21am

miha

how work in IE Chrom Opera?

Reply

02 Nov 2012 @1:34pm

Jon

This technique should work in all modern browsers. you can easily see the results in Chrome, Firefox, Opera. Internet Explorer 10 & 9 should work as well however older versions do not support the border radius, thus they do not work.

Reply

06 Nov 2012 @3:34pm

Post a new Comment

Please write your name.
Please enter your comment
Please enter your email address.