CSS: How to round box corners inside?

Question

There're border-radius property to round box corners. But how to round corners inside block, like subtracting circle?

Like here: http://malsup.com/jquery/corner/

Curl settings

I'm not sure what you mean by "inside block" and "subtracting circle". Here is an example using `border-radius` to style a `div` to look like a circle: http://jsfiddle.net/39N9V/ — showdev, Aug 29 '13 at 18:16
@showdev: He means he wants the corners to curve inwards, instead of outwards. Think a negative border-radius, only I doubt anything like that exists. — Madara's Ghost, Aug 29 '13 at 18:19
No there's no such thing in CSS, however if you show us what are you trying to achieve we can find other ways to do this. — Yotam Omer, Aug 29 '13 at 18:20
@MadaraUchiha, yes. you are right. But negative border-radius does not work. — Artem E, Aug 29 '13 at 18:21
Its not overly browser supported, you could use a PNG background image however to create the effect. Which in my view would be easier and more browser compatible. — Sir, Aug 29 '13 at 18:22
This might be helpful: http://stackoverflow.com/questions/11033615/inset-border-radius-with-css3 An example: http://jsfiddle.net/39N9V/1/ — showdev, Aug 29 '13 at 18:25
@showdev, why not writing this in answer box? Anyway, thanks! — Artem E, Aug 29 '13 at 18:28

score 7 · Answer 1 · answered Aug 29 '13 at 18:24

7

This can be done by adding four circular "gradient" background images on top of the normal background image, each positioned at the appropriate corner. There's an example on Lea Verou's blog. From that I've extracted a JSFiddle; the key code is

.round {
    background:
        radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px);

    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;

    padding: 14px;
}

answered Aug 29 '13 at 18:24

Domenic

110,262
41
219
271

2

You beat me to the clock! Just to add a note about upcoming standard W3C `border-corner-shape` http://lea.verou.me/2013/03/preview-border-corner-shape-before-implementations/ – Simon Boudrias Aug 29 '13 at 18:25
Variant, but I need most cross-browser solution. – Artem E Aug 29 '13 at 18:25
How would that work on inputs? – Madara's Ghost Aug 29 '13 at 18:26
1

@MadaraUchiha the same way it works on every other element... http://jsfiddle.net/EjE7c/1815/ – Domenic Aug 29 '13 at 18:30
@Domenic, but looks very strange :D – Artem E Aug 29 '13 at 18:35
1

Note that this doesn't seem to work in Safari 5.1.9. I assume the culprit is browser compatibility for `radial-gradiant`: http://css-tricks.com/css3-gradients/ – showdev Aug 29 '13 at 18:38
1

@showdev yes, Safari 5.1.9 still uses nonstandard radial gradient syntax; you need the crappy old WebKit syntax if you want it to work there. – Domenic Aug 29 '13 at 18:44
Can the CSS solution posted by me used as an alternative ? – Rijul Aug 29 '13 at 22:01
7 years later `border-corner-shape` is now `corner-shape` and in the CSS4 draft with no browser support in sight. So sad. – Daniel Nalbach Sep 15 '20 at 17:12

Madara's Ghost · Answer 2 · 2013-08-29T18:30:37.710

1

No, there isn't a way to do it with pure CSS as far as I know. It's not even simple to do it with JavaScript or jQuery.

As far as I know, the jQuery plugin you linked is the one that works best for you, especially since you want a cross-browser solution, which advanced CSS3 isn't there yet, and it is the one you should use.

edited Aug 29 '13 at 18:30

answered Aug 29 '13 at 18:25

Madara's Ghost

172,118
50
264
308

Thanks, I just wanted to know if exists any Right Way in doing such things. Know I know some ways doing that with two div's with border-radius and with gradient overlay and with js – Artem E Aug 29 '13 at 18:34
1

@ArtemE: The right way is Domenic's answer, and the hell with IE. – Madara's Ghost Aug 29 '13 at 18:39
See the CSS solution below posted – Rijul Aug 29 '13 at 21:58

score 1 · Answer 3 · answered Aug 29 '13 at 21:56

There is one way to do it with pure CSS:

CSS code:

div {
height: 200px;
background: red;
position: relative;
width:200px;
}

div:after {
content: '';
position: absolute;
top: -20px; right: -20px;
border-top: 50px solid white;
border-left: 50px solid white;
width: 0;
background:#fff;
    border-radius:100px;

}
div:before {
content: '';
position: absolute;
top: -20px; left: -20px;
border-top: 50px solid white;
border-left: 50px solid white;
width: 0;
background:#fff;
    border-radius:100px;

}

HTML: <div></div>

Here is an example:

Yes, it can be one more solution. Regards – Artem E Aug 30 '13 at 08:41 — Artem E, Aug 30 '13 at 08:41

CSS: How to round box corners inside?

3 Answers3

Linked