CSS: borders with negative radius

Question

I have a question I met for the first time about the borders.

So, I need to create similar borders without any images (if it is possible):

The same at the bottom of the page

As you can see, there are two borders with negative (?) border-radius. I know that negative border-radius won't work, so I would highly appreciate if someone could help me with solution.

I already tried this: The first example, but the problem is that I am not able to create normal borders - the whole block only.

Answer 1

Have a div element as a wrapper, and add elements with the div to serve as the rounded corners. You can try to add corners with border-radius on child elements:

Example here: http://jsfiddle.net/5YS68/

div {
    width: 100px;
    height: 100px;
    overflow: hidden;
    z-index: 1;
    position: relative;
}

p {
    margin: 0;
    width: 98px;
    height: 98px;
    border: 1px solid red;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}
b.top-right {
    position: absolute;
    z-index: 3;
    background: white;
    top: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    border: 1px solid red;
    border-radius: 999px;
}

b.top-left {
    position: absolute;
    z-index: 3;
    background: white;
    top: -5px;
    left: -5px;
    width: 10px;
    height: 10px;
    border: 1px solid red;
    border-radius: 999px;
}

You can also use :before and :after pseudo elements for cleaner html. Use one element (with before and after pseudo elements positioned absolute) for top corners, and one element for bottom corners

Answer 2

You can check out this jQuery plugin: http://jquery.malsup.com/corner/ Which has lots of other possibilities for border styling as well.

You can also check out a solution provided by Lea Verou. She uses negative border radius with css3 gradients: http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/