كيف أجعل زوايا الشكل أو الصورة بشكل دائري بواسطة css؟

هذه الخاصية هي border -radius و تقبل القيم ب px أو  em على الشكل التالي:

 border-radius: 25px;

 حيث أن قيمة هذه الخاصية الافتراضية هي 0px.

صورة توضيحية عن border-radius:

هذا محرر، يُغيّر شكل الزوايا مع تغير قيمة border-radius.

المصدر

تذكر فقط يا أخي  عندما  تستعمل الخاصية border-raduis  مراعاة  حجم الصورة   مثلا حتى تحصل على شكل دائري تماما يجب أن تكون الصورة مربعة الشكل و التعليمة  تقبل حميع القيم المستعملة في css3   مثل em ,px,%    و أفضل إستعمال لهذه الخاصية النسبة المئوية  و هنا مثال  بسيط  يراعي متطلبات المتصفحات المستعملة مثل safari ,chrome,mozila

img {
  border-radius: 50%; /*  opera, IE9, */
 -webkit-border-radius: 50%;  /* safari , chrome */
  -moz-border-radius: 50%;  /* mozila */
}

و كما قلت تحصل على الشكل الدائري تماما  إذا كانت الصورة مربعة كما قلت بالسابق  و إذا لم تكن يمكنك إضافة الخاصيتين   width ,height

img {
    width: 400px;  /*  العرض مساوي للطول */
    height: 400px;/*  العرض مساوي للطول */
}

يمكنك البحث أكثر عن هذه الخاصية  border-raduis.