فرض کنید که ما یک تصویر مستطیل شکل داریم که نیاز داریم و می‌خواهیم آن را مانند تصویر نمایه دایره‌ای نشان دهیم. اگر به تصویر border-radius: 50% بدیم تصویر تصویر دایره ای نمیشود و باید کار دیگه ای کرد.

ابتدا یک div در اطراف آن تگ تصویر قرار می‌دهیم تا بتوانیم کمی راحت‌تر با آن کار کنیم:

فرض کنید تصویری داریم که مستطیل است و می‌خواهیم آن را مانند تصویر نمایه دایره‌ای استاندارد نشان دهیم. در اینجا کد تصویر ما آمده است:

ابتدا یک div در اطراف آن تگ تصویر قرار می‌دهیم تا بتوانیم کمی راحت‌تر با آن کار کنیم و کلاس "image-cropper" را به آن داده‌ایم زیرا این همان کاری است که CSS ما به آن div اضافه می‌کنیم - تصویر ما را برش می‌دهیم.

<div class="image-cropper"><img src="/avatar.jpg" alt="avatar" class="profile-pic">
div>
<style>
.image-cropper {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}
.profile-pic {
  display: inline;
  margin: 0 auto;
  margin-left: -25%; //centers the image
  height: 100%;
  width: auto;
}

و در نتیجه تصویر مستطیل شکل ما دایره ای میشود.