spのみ改行・border-radiusという記述がしたい

HTML
1<h1><span>テキストが入ります</span><br class="hoge">
2    <span>テキストが入りますテキストが入ります</span>
3</h1>

css
1
2h1{
3  font-size: 3.6rem;
4  text-align: center;
5  margin: 40px auto 46px;
6}
7h1 span{
8  background-color: #fff;
9  height: 64px;
10  padding: 5px 10px;
11  border-radius: 8px;
12}
13.hoge{
14 display: none;
15}
16
17@media screen and (max-width:375px){
18
19h1{
20 width: 88%;
21}
22h1 span{
23  height: 40px;
24}
25.hoge{
26 display: block;
27}
28
29
30}

spのみ改行はできるのですが、
改行前後のborder-radiusができません。

よろしくお願いいたします。

Lhankor_Mhy

2021/12/27 01:05

sp とはなんですか？ Smart Phone のことでしょうか？

ayu_mi

2021/12/27 06:52

失礼いたしました。 Smart Phoneのことです。ご指摘ありがとうございます。

mari.rinn

2021/12/30 05:33 編集

素朴な疑問なのですが、そもそも h1 span{ background-color: #fff; } 背景色は白なので、border-radiusかかってても見えないと思うのですが、ayu_miさんのブラウザでは見えているのですか？

ayu_mi

2021/12/30 10:59

失礼いたしました。 h1の背景色が background-color: #edede2; となっているため、#fffが見えます。ご指摘ありがとうございます。今後気をつけます。

recal

2021/12/30 12:09

ん？これどうゆう事ですか？｢spのみ改行・border-radiusという記述がしたい｣という質問なのに PCでもborder-radius:させてませんが？

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

回答2件

自己解決

PC版に以下の記述を加えました。

css
1h1 span{
2  border-top-left-radius: 8px;
3  border-top-right-radius: 0px;
4  border-bottom-right-radius: 0px;
5  border-bottom-left-radius: 8px;
6}
7h1 span:nth-of-type(2){
8  border-top-left-radius: 0px;
9  border-top-right-radius: 8px;
10  border-bottom-right-radius: 8px;
11  border-bottom-left-radius: 0px;
12}