border-radius が効かない。

Question

Tumblr（ブログ作成サイト）のCSSカスタマイズでデザインしていますが、
どうやっても角丸のborder-radiusが効きません。

CSS記述は

---

.ants-item-ten {
margin: auto;
padding:40px;
z-index: 4;
}

.ants-item-ten, .ants-sizer-ten {
width: 10%;
border-radius:10px;
}

---

です。

HTMLの方に問題があるのでしょうか？
（HTMLにも何か記述が必要でしょうか？）

CSS初心者で右も左もわかりません。

ちなみにTumblrはいわゆるSNSと仕組みが似ていて、
特にHTMLに記述しなくても普通に画像を投稿すれば自然と画像が表示されるので、
画像を表示するためにHTMLの方に記述は必要ありませんでした。

ちなみに使用しているOSは Mac OS Sierra、ブラウザはSafariです。
最新のものを使っているので問題ないハズなのですが・・・。

Comments

[azuapricot]

HTMLの方に記述は必要なかったかもしれませんが回答者が現象を再現するためにはHTMLが必要なので現状のコードをしっかり提示しましょうね

[azuapricot]

今のままでは何のタグのどこの部分に角丸を設定しようとしてるのかこちらからはまっっったくわかりません。

[oikashinoa]

> どうやっても角丸のborder-radiusが効きません。
何を角丸にしたいんでしょうか？なにも伝わってきません。

「HTMLを編集」で出てきたものと、（<article id="{PostID}" (略） "{PostNotesURL}" data-pt="photo">）
実際に自分のPCで見た時のHTMLと、
実際に自分のPCで見た時の画像及びどの箇所を角丸にしたいかを質問本文修正すれば誰か回答してくれるでしょう。

Answer 1

これを参考にしてみれば？
池澤あやかが教えるTumblr講座「画像を角丸にする」 - 週刊アスキー

Comments

[退会済みユーザー]

参考になりそうなリンクどうもです。
ただ、HTMLを開いてみると「article img」という項目自体がないんですね。
代わりに、
<article id="{PostID}" class="{block:IndexPage} ants-item-{select:Posts Columns} post modal post-photo pp {block:Tags}{Tag} {/block:Tags}{/block:IndexPage}{block:PermalinkPage}{block:Date} post-single{/block:Date}{/block:PermalinkPage}" data-id="{PostID}" data-notes="{PostNotesURL}" data-pt="photo">
という記述があって、この中にどう　border-radius:10px;　を入れればいいのかわからんのです。

[oikashinoa]

”質問への追記・修正、ベストアンサー選択の依頼”に依頼事項書いたので記載すると誰か回答してくれるかもしれません。

Answer 2

<div> aaa </div>

div {
  width:100px;
  height:100px;
  background-color:red;
  border-radius:10px;
}

現時点での情報だけでは

border-radius指定するところがまちがってるんじゃ？くらいしか言えません

---

『CSS』の追記

HTMLを提示してほしいと伝えたはずなのにCSSを提示されて困惑するしかありません

<div> aaa </div>

div {
  width:100px;
  height:100px;
  background-color:red;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  position:absolute;
  top:27px;
  left:24px;
/*   visibility:hidden; */
/*   opacity:0; */
  color:#E7E7E7;
  z-index:3;
  font-size:16px;
  border-radius:120px;
  cursor:grabbing;
  -webkit-transform: translate3d(0,-05px,0);
  transform: translate3d(0,-5px,0);
}

div:hover {
  opacity:0;
  visibility:visible;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  border-radius:120px;
}

ご提示いただいたCSSを適用させても問題なく丸くなります。

なぜ一部しか提示しないのでしょう。

Comments

[退会済みユーザー]

回答ありがとうございます。
同じ場所に記述してもblurとかは効くので原因がわかりません。

HTMLの方は、ここが原因かな？　と思う箇所は

article.post.pp .post-header {
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
position:absolute;
top:27px;
left:24px;
visibility:hidden;
opacity:0;
color:#E7E7E7;
z-index:3;
font-size:16px;
border-radius:120px;
cursor:grabbing;
-webkit-transform: translate3d(0,-05px,0);
transform: translate3d(0,-5px,0);
}
article.post.pp:hover .post-header {
opacity:0;
visibility:visible;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
border-radius:120px;

のあたりです。
article（記事）なので写真投稿に関する部分かな、
と思ったのですが。

[azuapricot]

あの・・・HTMLってなにかわかりますか？
それ、『CSS』ですよね？？？？？？？

[退会済みユーザー]

タンブラーを使ったことがある人はわかると思うんですが、
タンブラーのカスタマイズページは「HTMLを編集」という名称でして、
その中にHTMLもjava scriptもCSSも記述されてるんです。
なので難解かもしれませんね。

Answer 3

border-radius:10px;

もうちょい値を小さくされてみては？