Не работает border-radius как нужно

Question

Суть такая. В данный момент делаю CSS-код для профиля на сайте и возникает проблема в том, что при указании border-radius - картинка не скругляется, хотя по суть должна, что в гугле, что у других людей в коде - всё стабильно округляется.

Нужная строка имеет название profpic(рамка) и imgprof (Сама картинка), добавил два Дива от безисходности, так и не помогло( Скруглить нужно imgprof

div {
  display: block;

}

.flexcontainer {
  display: flex;
  position: absolute;
  left: 300px
}

body {
  background-color: #121212;
  color: white;
  font-family: "Inter", sans-serif;
  scroll-behavior: smooth;
  flex-direction: column;
  height: 1197px;
  width: 1380px;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


.middle {
  width: 1500px;
  border-right: 2px solid #8339C7;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: block;
}

span {
  filter: brightness(50%);
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  line-height: 20px;
}

h3 {
  display: block;
  font-size: 1.17em;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.bio {
  margin-top: 0px;
  margin-left: 173px;
  line-height: 40px;
  font-size: 15px;
}

.profpic {
  border-radius: 100%;
  width: 180px;
  height: 180px;
  border: 4px solid #8339C7;
}

.imgprof {
  border-radius: 100%;
  width: 180px;
  height: 180px;
}

.bio2 {
  margin-top: 0px;
  margin-left: 0px;
  line-height: 20px;
  font-size: 15px;
}

.postsheading {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: block;
}

.razdeleniepostov {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #8339C7;
  font-weight: bold;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.HeadingSlova {
  font-family: "Inter", sans-serif;
  font-weight: bold;
  display: block;
  cursor: pointer;
  padding: 0;
  margin-bottom: 10px;
  margin-top: 10px;
  border-bottom: 1px solid #8339C7;
  border-left: 1px solied #8339C7;
  box-sizing: border-box;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.gallery {
  gap: 3px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  vertical-align: baseline;
  box-sizing: border-box;
  position: relative;
  top: 0%;
  right: 0%;
  width: 100%;
}

<div class="flexcontainer">
  <div class="middle">
    <section class="SecondaryNick">
      <i class="strelkaokolonika" id="strelkaokolonika"></i>
      <div>
        <h3>CharonIkh</h3>
        <span>50 Sketches</span>
      </div>
    </section>
    <section class="profile">
      <div class="dlinayakartinka">
        <img src="css/85f261d42e472b72da4232ccb48acc44.jpg" height="300" width="1500" alt="banner" id="banner"/>
        <div class="editprfoile">Edit Profile</div>
      </div>
      <div class="bio">
        <div class="profpic">
          <div class="imgprof">
            <img src="css/avatar example.jpg" height="180" width="180" alt="profpicsd" id="img"/>
          </div>
        </div>
        <div class="bio2">
          <h3>CharonIkh</h3>
          <span>@CharonIkh</span>
        </div>
        <p>10 year</p>
        <p>Latvia, Riga, Gogola iela 19</p>
        <p>Dotwork, Anime, Neon</p>
        <span>Phone number avaible only for clients!</span>
      </div>
    </section>
    <section class="postsheading">
      <div class="razdeleniepostov">
        <p class="HeadingSlova">Works</p>
        <p class="HeadingSlova">Sketches</p>
        <p class="HeadingSlova">Reviews</p>
      </div>
    </section>
    <section class="gallery">
      <div class="gallery-item">
        <img src="css/d53ab946534d55df54bdf349c82d816d.jpg" height="500" width="500" alt="gallerypost1" class="gallerypost1"/>
        <span class="media-icon"></span>
      </div>
      <div class="gallery-item">
        <img src="css/09322e69f88642d4950035ea6fed6e62.jpg" height="500" width="500" alt="gallerypost2" class="gallerypost2"/>
        <span class="media-icon"></span>
      </div>
      <div class="gallery-item">
        <img src="css/7060f8c1d3790ef605da07cb72e43f7d.jpg" height="500" width="500" alt="gallerypost3" calss="gallerypost3"/>
        <span class="media-icon"></span>
      </div>
      <div>
        <img src="css/06bc6a89ef82d5e3d5ecf499ce2528a4.jpg" height="500" width="500" alt="gallerypost4" class="gallerypost4"/>
        <span class="media-icon"></span>
      </div>
      <div>
        <img src="css/34df7912cc9523864c87e7fa3b254161.jpg" height="500" width="500" alt="gallerypost5" class="gallerypost5"/>
        <span class="media-icon"></span>
      </div>
      <div>
        <img src="css/bd1ce539f2ac61a43bb278b275bb9a0b.jpg" height="500" width="500" alt="gallerypost6" class="gallerypost6"/>
        <span class="media-icon"></span>
      </div>
    </section>
  </div>
</div>

БЛОГ НА HUSL

Не работает border-radius как нужно

Ответы (0 шт):