Q&A
「border-radiusの値を変更しても角丸にはなりませんでした」とのことですが、当方では角丸になりました。
値をいくつに変更したのでしょうか？
前提・実現したいこと
角丸ボタンを中央配置したい。
ボタンの中央配置はできたが、角丸ができない。
発生している問題・エラーメッセージ
https://teratail.com/questions/124287
を参考にボタンを実装しました。
ボタンは中央に配置されましたがborder-radiusの値を変更しても角丸にはなりませんでした。
該当のソースコード
HTML
<a href="#" class="btn">登録ボタン</a>
CSS
.wrap {
text-align:center;
font-size:18px;
}
.btn{
position: relative;
display: inline-block;
padding: 0.5em 0.5em;
color: #FFF;
text-decoration: none;
background: #fd9535;
border-radius: 100px;
font-weight: bold;
/* margin-left: auto;
margin-right: auto; */
｝
試したこと
border-radiusの値を変えてみた。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
さっそくありがとうございます。
https://teratail.com/questions/124287
では、border-radius: 4px;でしたので100pxに変更してみました。200px、300pxなども試しましたがうごかずです。
「うごかず」とはどういう状況ですか？
形が変わらない、という意味です。
問題が再現しませんでした。
質問に書かれてある「当該ソースコード」のみを試した場合には、角丸が適用されました。
したがって、「当該ソースコード」以外の部分で角丸のルールが別に記載されている可能性があります。
ブラウザの「開発ツール」で適用されているCSSのルールを調べることができますが、そちらはためしましたか？
もしくは、今書いているコード全てを質問に掲載することで、答えを得られるようになるかもしれません。
ご提示のコードでサンプルを作りました。
https://jsfiddle.net/Lhankor_Mhy/ydbko5L7/
officeyuyu3さんの環境で、上記サンプルページの二つのボタンは、形が変わらないように見えますか？
もし形が変わらないのであれば、環境の問題だと思います。
もし形が変わるのであれば、ご提示いただいていない部分に原因があると思われます。
形が変わって見えます。
ワードプレスを使っているのですが、ワードプレスのボタンでは中央配置ができなかったので自分でHTMLを書きました。
では、WordPressのCSSの影響を受けているのかもしれません。
デベロッパーツールで検証してみてはどうでしょうか。
ありがとうございます。ご教示いただきました方法とは違うのですが、当初の目的は、ボタンの中央ぞろえなので、別の方法で解決しました。
https://yosiakatsuki.net/block-button/
コード通りに表示されないときはWordPressのCSSの影響を受けている可能性がある、そのときはデベロッパーツールで検証するという方法は覚えておきます。
初歩的な質問にお付き合いいただきありがとうございました。
ご解決されて何よりです。
お手数ですが、自己解決の処理をお願いします。
行き違いました。ご対応ありがとうございます。
自己解決
