Zenn
😀

div に対して border-radius: 50%が利かない

2023/12/06に公開
CSS
HTML
tech

やりたいこと

div を親に持つ 画像を丸表示にしたい

画像を丸表示にしたい。

<div class="form_input_wrapper profile">
    <div class="cropped_image_container profile" id="cropped_image_container">
        <img id="cropped_icon" class="cropped_icon" alt="トリミング結果" src="#">
        <button id="remove_cropped_image_button" class="remove_cropped_image_button profile" type="button">&times</
button>
    </div>
</div>


.cropped_image_container.profile {
    position: relative;
    top: 0;
    left: 0;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
}

.remove_cropped_image_button {
    width: 4rem;
    height: 4rem;
    text-align: center;
    border-radius: 50%;
    font-size: 2.4rem;
    background-color: #f6f5f4;
    
    position: absolute;
    top: 0;
    left: 14rem;

}

原因、解決策

親要素にborder-radiusを設定するだけではだめ。

1.というか子要素だけでいい。(親も設定してもいいけど、今回は子のみ)

2.親要素にoverflow: hiddenを設定する必要がある。

1の場合

2の場合(×ボタンが隠れた)

終わりに

やりたかったことは 1であるので1を採用
プロフィールアイコン画像表示に採用した。
最近のwebサービスは プロフィール画像が丸表示が多いので、
自身のプロダクトに導入してみた。

Discussion