CSSのみでborderの角を逆方向に丸くしたい。

タイトルを囲うボーダーの角を逆方向に丸くしたいのですが、
うまくいきません。（下にイメージ画像）
イメージ画像は角が綺麗な円状になっていませんが、円状で構いません。

条件としては、
・タイトルの文字数は未定なので、文字数が増えても形が崩れないこと
・htmlは変更しない
・横幅が変化しても形が崩れないこと
・CSSのみで形をつくる

以上の条件下でイメージ画像のような形をつくることができるのでしょうか。
ぜひご教授いただければ幸いです。

html
1<div>タイトル</div>

追記
試したこと

４つのパーツに分けて画像を切り出し、背景として合わせました。
ブラウザの倍率やブラウザが変わるとずれが生じてしまうことから、CSSだけで実現できないか質問させていただきました。

css
1  width: 100%;
2  margin: 0 auto;
3  padding: 10px;
4  background: url(img/top.png), url(img/bottom.png), url(img/right.png), url(img/left.png);
5  background-position: top center, bottom center, center right, center left;
6  background-size: 100% 10px, 100% 10px, 4px 100%, 4px 100%;
7  background-repeat: no-repeat;

m.ts10806

2017/10/03 07:31

調べてみたこと、やってみたことはありますか？あれば追記してください。

行動規範の内容に同意します

回答4件

画像を使ってしまっていますが

CSS
1div {
2  border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAIAAAC1nk4lAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAH4SURBVGhD7Zo7S8RAFIXzN/0RFnbW22opWFnYWAl2YrutvZWNhdXCKr5WUDEenOvlZF6k2DvJ4HwcECaP+2Uyk9HErk/zenW+2tuZJCgtEjGa9Pbyj6XzZ9kK48vlpJ9ODvUs79dLaTUDJbQcSktrjJz0erGrZ/m4vZFWM1BCy6G0tMZISn+tV3oKRFqN4YoQkNaApDTfrIeDfWk1BoW0aGZAJqX5+JeLU2k1BoW0aKan4tI8vJDP+zvZYAwKcd3URIpLPx4t9MhiY8PBdxga0jokIr1ZXuphSIGHHcNzCYGMbCB8ae8GFe5mB3c2Eg7OgbTXx0iBx3OIN6MQr787LJjI89kxLyUuBZbuFLyku0APks6287ZpsIecYCIg4Clp4tLR4V+ecLi6+NK4vsz6WR7IhF0+kP7evMm+MwNi7DmQll1mCXs2aUvYs0lbwp5N2hL2bNKWsGeTtoQ9m7Ql7NmkLWHPJm0JezZpS9izSVvCngPpKv8aR+p776Gp7A2TBtcnh05E2MGaOt+ayl6/hLdjpu+n5ecf9X0JcHj9XcE3F0d9X7eAN6rCG2SENzhTMyouDfiK6/hiC3hsFRsh3FOZuZSUxvqpxyPSagxXzPw2kZQGvNwUeGDzREJpaY2Rk67yP2t4LS2wpI8vN1a6cJp0qeSk+/4H37UTFZzRKTsAAAAASUVORK5CYII=') 20;
3  border-style: solid;
4  border-width: 20px;
5}

border-image
https://developer.mozilla.org/ja/docs/Web/CSS/border-image

http://www.htmq.com/css3/border-image.shtml
https://allabout.co.jp/gm/gc/441025/

MDNにIE未サポートと書いてありますが、実際には対応しています(IE11で確認)。
http://caniuse.com/#search=border-image

投稿2017/10/03 08:19

x_x

総合スコア13749

brebre

2017/10/07 09:32

ご回答いただきありがとうございました。こちらで回答いただいた内容でも問題なく表示されました。

行動規範の内容に同意します

ベストアンサー

制約がなくも無いが、とりあえずできる方法を。

CSS
1div {
2	margin: 2em;
3	padding: 4em;
4	background-color: white;
5	background-image:
6		  radial-gradient(circle at left top, white 1em, red 1em, red 2em, rgba(255,0,0,0) 2em)
7		, radial-gradient(circle at right top, white 1em, red 1em, red 2em, rgba(255,0,0,0) 2em)
8		, radial-gradient(circle at right bottom, white 1em, red 1em, red 2em, rgba(255,0,0,0) 2em)
9		, radial-gradient(circle at left bottom, white 1em, red 1em, red 2em, rgba(255,0,0,0) 2em)
10		, linear-gradient(to top, red 1em, rgba(255,0,0,0) 1em )
11		, linear-gradient(to right, red 1em, rgba(255,0,0,0) 1em )
12		, linear-gradient(to bottom, red 1em, rgba(255,0,0,0) 1em )
13		, linear-gradient(to left, red 1em, rgba(255,0,0,0) 1em );
14}
15```**動くサンプル：**[https://jsfiddle.net/pzm6qw70/](https://jsfiddle.net/pzm6qw70/)
16
17---
18
19
20【CSS グラデーションの利用 - ウェブデベロッパーガイド | MDN】
21[https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients](https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients)
22
23【radial-gradient - CSS | MDN】
24[https://developer.mozilla.org/ja/docs/Web/CSS/radial-gradient](https://developer.mozilla.org/ja/docs/Web/CSS/radial-gradient)
25
26
27---
28
29**追記：**
30
31改良。
32
33```CSS
34div {
35	margin: 2em;
36	padding: 4em;
37	background-position: center;
38	background-repeat: no-repeat;
39	background-image:
40		  radial-gradient(circle at left top, rgba(255,0,0,0) 1em, red 1em, red 2em, rgba(255,0,0,0) 2em)
41		, radial-gradient(circle at right top, rgba(255,0,0,0) 1em, red 1em, red 2em, rgba(255,0,0,0) 2em)
42		, radial-gradient(circle at right bottom, rgba(255,0,0,0) 1em, red 1em, red 2em, rgba(255,0,0,0) 2em)
43		, radial-gradient(circle at left bottom, rgba(255,0,0,0) 1em, red 1em, red 2em, rgba(255,0,0,0) 2em)
44		, linear-gradient(to bottom, red 1em, rgba(255,0,0,0) 1em )
45		, linear-gradient(to left, red 1em, rgba(255,0,0,0) 1em )
46		, linear-gradient(to top, red 1em, rgba(255,0,0,0) 1em )
47		, linear-gradient(to right, red 1em, rgba(255,0,0,0) 1em )
48		;
49	background-size:
50		  auto auto
51		, auto auto
52		, auto auto
53		, auto auto
54		, calc(100% - 2em) auto
55		, auto calc(100% - 2em)
56		, calc(100% - 2em) auto
57		, auto calc(100% - 2em)
58		;
59}
60```**動くサンプル：**[https://jsfiddle.net/pzm6qw70/1/](https://jsfiddle.net/pzm6qw70/1/)

投稿2017/10/03 09:43

編集2017/10/03 10:17

kei344

総合スコア69625

brebre

2017/10/07 09:34

今回、こちらをベストアンサーとさせていただきました。ご回答いただきありがとうございました。

行動規範の内容に同意します

・htmlは変更しない

この条件がある限りかなり難しいのではないでしょうか。

もし該当の要素が下記のように二重構造になっている場合のみ、疑似要素を駆使して実装はできます。かなり無理矢理ですが。

HTML
1<div id="wrapper">
2  <div id="container">タイトル</div>
3</div>

CSS
1#wrapper,
2#container {
3  position: relative;
4  box-sizing: border-box;
5}
6
7#wrapper {
8  overflow: hidden;
9}
10
11#container {
12  border: 3px solid #ff6347;
13  padding: 20px;
14}
15
16#wrapper::before,
17#wrapper::after,
18#container::before,
19#container::after {
20  content: "";
21  display: inline-block;
22  width: 30px;
23  height: 30px;
24  border: 3px solid #ff6347;
25  border-radius: 100%;
26  background: #fff;
27  position: absolute;
28  z-index: 1;
29  box-sizing: border-box;
30}
31
32#wrapper::before {
33  top: -12px;
34  left: -12px;
35}
36
37#wrapper::after {
38  top: -12px;
39  right: -12px;
40}
41
42#container::before {
43  bottom: -15px;
44  left: -15px;
45}
46
47#container::after {
48  bottom: -15px;
49  right: -15px;
50}