border-radiusが反映されません。

前提・実現したいこと

#service h1にborder-radiusで角丸を作成したいです。

発生している問題・エラーメッセージ

border-radius: 30px;で設定していますが反映されません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Forest town</title>
6    <link rel="stylesheet" type="text/css" href="style.css">
7    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">
8    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap" rel="stylesheet">
9    <link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
10</head>
11<body>
12    <header>
13        <h1>Forest town</h1>
14          <nav>
15            　<ul>
16                  <li class="li-1">会社概要</li>
17                  <li class="li-2">サービス</li>
18                  <li class="li-3">採用</li>
19                  <li class="li-4">お問い合せ</li>
20              </ul>
21          </nav>
22    </header>
23
24    <main>
25        <section id="main-visual">
26            <img src="eha0037-003.jpg">
27            <h1>Clean in the city</h1>
28            <h2>クリーンな空気で快適な生活を</h2>
29        </section>
30    
31        <section id="service">
32            <h1>サービス</h1>
33            <p>ハウスクリーニング</p>
34            <ul>
35                <li>エアコン</li>
36                <li>浴室</li>
37                <li>洗面所</li>
38                <li>キッチン</li>
39            </ul>
40            <p>etc</p>
41            <p>テナント</p>
42            <ul>
43                <li>オフィスの床面清掃</li>
44                <li>飲食店の店内清掃</li>
45            </ul>
46            <p>etc</p>
47        </section>
48        
49    </main>
50    
51</body>
52</html>

CSS
1html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
2    margin: 0;
3    padding: 0;
4    border: 0;
5    font-weight: normal;
6    font-size: 100%;
7    vertical-align:baseline;
8    -webkit-box-sizing: border-box;
9    -moz-box-sizing: border-box;
10    box-sizing: border-box;
11  }
12  article, header, footer, aside, figure, figcaption, nav, section { 
13    display:block;
14  }
15  body {
16    line-height: 1;
17    -ms-text-size-adjust: 100%;
18    -webkit-text-size-adjust: 100%;
19  }
20  ol, ul {
21    list-style: none;
22    list-style-type: none;
23  }
24
25/*ALL*/
26* {
27  font-family: 'Noto Serif JP', serif;
28}
29
30/*ヘッダー*/
31header {
32  display: flex;
33  justify-content: space-between;
34  align-items: center;
35}
36
37header h1 {
38  font-family: 'Orbitron', sans-serif;
39  font-size: 50px;
40}
41
42header ul {
43  display: flex;
44  align-items: center;
45  text-align: center;
46  width: auto;
47  height: 40px;
48}
49
50header ul .li-1{
51  display: flex;
52  justify-content: space-between;
53  border-bottom: 1px solid #b0c4de;
54  margin: 37px;
55}
56
57header ul .li-2{
58  display: flex;
59  justify-content: center;
60  border-bottom: 1px solid #b0c4de;
61  margin: 37px;
62}
63
64header ul .li-3{
65  display: flex;
66  justify-content: space-between;
67  border-bottom: 1px solid #b0c4de;
68  margin: 37px;
69}
70
71header ul .li-4{
72  display: flex;
73  justify-content: space-between;
74  border-bottom: 1px solid #b0c4de;
75  margin: 37px;
76}
77
78/*メイン*/
79#main-visual {
80  position: relative;
81  font-family: 'Poiret One', cursive;
82  display: inline-block;
83}
84
85#main-visual img {
86  margin-top: 15px;
87  width: 100%;
88  height: auto;
89}
90
91#main-visual h1 {
92  position: absolute;
93  top: 50%;
94  left: 0;
95  right:0;
96  text-align: center;
97  font-size: 50px;
98  color: #006666;
99  border-bottom:3px solid #006666;
100}
101
102#main-visual h2 {
103  position: absolute;
104  top: 70%;
105  left: 0;
106  right:0;
107  text-align: center;
108  font-size: 50px;
109  color: #006666;
110}
111
112#service {
113  display: inline-block;
114}
115
116#service h1 {
117  font-size: 30px;
118  border-radius: 30px;
119}

試したこと

h1がblock要素なので行けないのかと思い、inline-blockで設定しましたが変化ありませんでした。
px指定なので%指定にしてみましたが、こちらも変化ありませんでした。

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

回答1件

ベストアンサー

提示のコードには背景色やborderが設定されていないので、追加して確認しましたが、ちゃんと角丸になってますよ。

css
1#service h1 {
2  font-size: 30px;
3  border-radius: 30px;
4  background-color: aqua;
5  border: 1px solid;
6}

提示されていない部分のコードが影響しているのでは。
検証ツールで適用されているCSSを確認してみては。

投稿2020/10/25 11:27

編集2020/10/25 11:29

hatena19

総合スコア33790

karin0523

2020/10/25 14:40

問題なく反映されました。原因分かりませんが私の端末の読み込みがおかしかったのかもしれません。。

hatena19

2020/10/26 01:00

キャッシュが残っていたのかも。そういう場合はスーパーリロード(キャッシャクリア)をするといいでしょう。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！