تعلّم CSS border radius كيف تصمّم زوايا منحنية وأشكال بيضاوية بسهولة

شرح شامل لخاصية border-radius في CSS

في هذا المقال، سنغوص في خاصية border-radius في CSS، والتي تتيح لك عمل زوايا منحنية للعناصر بأشكال متنوعة — من الزوايا المستديرة البسيطة إلى الدوائر الكاملة والأشكال البيضاوية. ستتعلم كيفية استخدام هذه الخاصية بشكل اختياري لكل زاوية باستخدام وحدات الطول أو النسبة المئوية، بالإضافة إلى الكتابة المختصرة.

1. القيمة المفردة

تطبيق نفس نصف القطر لكافة الزوايا:

div.one {
  border-radius: 15px;
}

2. قيمتان

القيم الأولى تطبّق على الزاويتين العلوية اليسرى والسفلية اليمنى، والقيم الثانية تطبّق على العلوية اليمنى والسفلية اليسرى:

div.two {
  border-radius: 15px 50px;
}

3. ثلاث قيم

الأولى للعلوي الأيسر، الثانية لتقريب العلوية اليمنى والسفلية اليسرى، والثالثة للسفلي الأيمن:

div.three {
  border-radius: 15px 50px 30px;
}

4. أربع قيم

الترتيب: أعلى يسار، أعلى يمين، أسفل يمين، أسفل يسار:

div.four {
  border-radius: 15px 50px 30px 5px;
}

5. استخدام النسب المئوية

مفيدة لجعل العنصر دائري تمامًا ( إذا كان مربع) أو بيضاوي (elliptical):

div.circle {
  border-radius: 50%;
}
div.ellipse {
  border-radius: 50px / 15px;
}

6. خصائص كل زاوية على حدة (Longhand)

يمكنك التحكم في كل زاوية بشكل مفصل:

div.individual {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}

الخاتمة

خاصية border-radius في CSS أداة قوية لبناء تصميمات جمالية وأنيقة بسهولة. بإتقان كتابتها بنمط مختصر، أو باستخدام وحدات متقدمة أو تخصيص الزوايا، يمكنك خلق تأثير بصري جذاب واحترافي.