9

Since 3 hours I'm trying to find how to inverse border radius, I saw a small code in css3 specially for that, but I can't find it ...

You must know I'm working with wordpress (unfortunately)

Have an idea ?

Asons
  • 84,923
  • 12
  • 110
  • 165
Emilien
  • 2,701
  • 4
  • 15
  • 25
  • 1
    Will this help? http://stackoverflow.com/questions/22421880/inverted-border-radius-possible – Asons Sep 25 '16 at 14:56
  • I already seen this post, and this hasn't helped me 'cause the issue use lot of
    , but I'm on a Wordpress so put some
    directly in the code is not a good idea .. With css3 we can do this in one line of code, but I forgotten how ^^
     – Emilien Sep 25 '16 at 15:01
  • 1
    Well, there is no such CSS3 property as of today – Asons Sep 25 '16 at 15:06
  • 1
    So if you don't mind, I am about to vote to close this as a duplicate? – Asons Sep 25 '16 at 15:07
  • Ok, but does something more simple is existing ? Using CSS3 – Emilien Sep 25 '16 at 15:08
  • Just follow the dupe link and you'll find more than one way, some without adding a bunch of div's – Asons Sep 25 '16 at 15:09

1 Answers1

17

If your tab has a solid background color you can use pseudo elements to archive this.

First we create a tab with border radius in the top left and top right corners.

.tab {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

Then we add position: relative, because we need to use position: absolute in the pseudo elements.

.tab {
    position: relative;
}

Now, we are going to create and position our pseudo elements as a quarter of a circle, transparent, with box-shadow to simulate borders.

.tab:before,
.tab:after {
    content: "";
    position: absolute;

    height: 10px;
    width: 20px;

    bottom: 0;
}

.tab:after {
    right: -20px;

    border-radius: 0 0 0 10px;
    -moz-border-radius: 0 0 0 10px;
    -webkit-border-radius: 0 0 0 10px;

    -webkit-box-shadow: -10px 0 0 0 #fff;
    box-shadow: -10px 0 0 0 #fff;
}

.tab:before {
    left: -20px;

    border-radius: 0 0 10px 0;
    -moz-border-radius: 0 0 10px 0;
    -webkit-border-radius: 0 0 10px 0;

    -webkit-box-shadow: 10px 0 0 0 #fff;
    box-shadow: 10px 0 0 0 #fff;
}

And this is the result:

enter image description here

DEMO: jsFiddle

body {
 background: #1c1c1c;
 padding: 50px;
}

.tab {
 float: left;

 width: 90px;
 padding: 10px 15px;
 height: 30px;

 position: relative;

 background: #fff;

 -webkit-border-top-left-radius: 10px;
 -webkit-border-top-right-radius: 10px;
 -moz-border-radius-topleft: 10px;
 -moz-border-radius-topright: 10px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
}

.tab:before,
.tab:after {
 content: "";
 position: absolute;

 height: 10px;
 width: 20px;

 bottom: 0;
}

.tab:after {
 right: -20px;

 border-radius: 0 0 0 10px;
 -moz-border-radius: 0 0 0 10px;
 -webkit-border-radius: 0 0 0 10px;

 -webkit-box-shadow: -10px 0 0 0 #fff;
 box-shadow: -10px 0 0 0 #fff;
}

.tab:before {
 left: -20px;

 border-radius: 0 0 10px 0;
 -moz-border-radius: 0 0 10px 0;
 -webkit-border-radius: 0 0 10px 0;

 -webkit-box-shadow: 10px 0 0 0 #fff;
 box-shadow: 10px 0 0 0 #fff;
}
<div class="tab"></div>
agustin
  • 2,187
  • 2
  • 22
  • 40
  • In wordpress it's not very simple to add some code ^^ But I'll try something like this ! And I'll edit my first post if I find a solution :) – Emilien Sep 26 '16 at 09:46
  • I can't add
    to add a class, so I have to put a border to my elements, and when I apply a jQuery plug-in the border is ignored by the border-radius !
     – Emilien Sep 28 '16 at 11:27