CSS: borders with negative radius [duplicate]

Answer 1

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/

Answer 2

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