تُستخدم خاصية border-radius في لغة CSS لتحويل حدود (أطراف - زوايا) الإطارات من زاوية مربعة إلي زاوية دائرية ويمكن التحكم في حجم التدوير بوحدة pixel بيكسل أو بالنسب المئوية.

قيم خاصية border-radius في لغة CSS:

length حجم التدوير بوحدة بيكسل وأصغر قيمه هي 1 بيكسل وأكبر قيمة إذا كان طول العنصر 100 بيكسل وعرضة 100 بيكسل فأعلي قيمة هي 50 بيكسل فقط.
percentage هي نسبة مئوية وأصغر قيمه هي %1 وأكبر قيمة إذا كان طول العنصر 100 بيكسل وعرضة 100 بيكسل فأعلي قيمة هي %50 فقط.

border-radius syntax

طريقة كتابة خاصية border-radius في لغة CSS.

border-radius:value;

border-radius values

قيم خاصية border-radius في لغة CSS.

border-radius:1-4 length|% / 1-4 length|%|initial|inherit;

CSS Rounded Borders

يوضح المثال التالي كيفية جعل زوايا الإطار مستديرة.

p 
{
  border: 2px solid red;
  border-radius: 5px;
}

جربها بنفسك

مهم

لا تعمل خاصية border-radius بدون خاصية border في لغة CSS فيجب عليك إضافة border بحجم ولون ونوع قبل عمل تدوير له فليس من المنطقي إضافة تدوير علي إطار غير موجود.
يُمكن التحكم في إستدارة زاوية واحدة أو زوايتين أو ثلاث زوايه وترك المُتبقي مربع عن طريق إستخدام خصائص sides الجوانب مع الإطارات في لغة CSS.

</> CSS Borders Radius With Pixel
التحكم بتدوير الإطار بواحدة بيكسل في لغة CSS

تُستخدم خاصية border-radius مع وحدة pixel البيكسل للتحكم بحجم تدوير زوايا الإطار الداخلي (border).

CSS Borders Radius With Pixel

خاصية border-radius مع وحدة pixel في لغة CSS.

p
{
  border: 2px solid red;
  border-radius: 12px;
}

جربها بنفسك

</> CSS Borders Radius With Percentage
التحكم بتدوير الإطار من خلال النسبة المئوية في لغة CSS

تُستخدم خاصية border-radius مع وحدة Percentage النسبة المئوية % لتحكم بحجم تدوير زوايا الإطار الداخلي (border).

CSS Borders Radius With Percentage

خاصية border-radius مع وحدة % في لغة CSS.

p
{
  border: 2px solid red;
  border-radius: 30% ;
}

جربها بنفسك

</> CSS Borders Radius Shorthand
اختصار خاصية borders-radius في لغة CSS

يُمكن في لغة CSS إعطاء كل زاوية من زوايا الإطار الداخلي border تدوير كامل أو تدوير نصفي.

توضيح: يمكن جعل أحد زوايا الإطار مدورة كثيراً، وجعل زاوية ثانية أقل تدوير، وترك باقي الزوايا مربعة بدون عمل تدوير لها.

تحديد حجم التدوير لكل زاوية من زوايا الإطار الداخلي border على حدى:

border-top-left-radius تُستخدم لتحديد حجم تدوير الزاوية العلوية في اليسار.
border-top-right-radius تُستخدم لتحديد حجم تدوير الزاوية العلوية في اليمين.
border-bottom-right-radius تُستخدم لتحديد حجم تدوير الزاوية السفلية في اليمين.
border-bottom-left-radius تُستخدم لتحديد حجم تدوير الزاوية السفلية في اليسار.

CSS Border Top Left Radius

تحديد حجم تدوير الزاوية العلوية في اليسار عن طريق خاصية border-top-left-radius في لغة CSS.

p
 {
  border: 2px solid red;
  border-top-left-radius: 12px;
}

جربها بنفسك

CSS border top right radius

تحديد حجم تدوير الزاوية العلوية في اليمين عن طريق خاصية border-top-right-radius في لغة CSS.

p
 {
  border: 2px solid red;
  border-top-right-radius: 12px;
}

جربها بنفسك

CSS border bottom right radius

تحديد حجم تدوير الزاوية السفلية في اليمين عن طريق خاصية border-bottom-right-radius في لغة CSS.

p
 {
  border: 2px solid red;
  border-bottom-right-radius: 12px;
}

جربها بنفسك

CSS border bottom left radius

تحديد حجم تدوير الزاوية السفلية في اليسار عن طريق خاصية border-bottom-left-radius في لغة CSS.

p
 {
  border: 2px solid red;
  border-bottom-left-radius: 12px;
}

جربها بنفسك

</> CSS Borders Radius Shorthand
خاصية borders-radius في لغة CSS

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

قيم متعدّدة داخل خاصية border-radius:

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

توضيح:

تُمثل الساعة الثانية عشر في عقارب الساعة الاتجاه العلوي top.
تُمثل الساعة الثالثة في عقارب الساعة الاتجاه الأيمن right.
تُمثل الساعة السادسة في عقارب الساعة الاتجاه السفلي bottom.
تُمثل الساعة التاسعة في عقارب الساعة الاتجاه الأيسر left.

CSS Border Radius

CSS border radius value

تُستخدم خاصية border-radius: value لإدخال مقدار التدوير لكل زوايا الإطار مرة واحدة في لغة CSS.

p
 {
  border: 2px solid red;
  border-radius: 5px;
}

جربها بنفسك

CSS border radius: value1 value2

تُستخدم الخاصية border-radius: value1 value2 في الإطار في لغة CSS لإعطاء الزاوية العلوية في اليسار والزاوية السفلية في اليمين حجم التدوير value1، ولإعطاء الزاوية العلوية في اليمين والزاوية السفلية في اليسار جحم التدوير value2.

p
 {
  border: 2px solid red;
  border-radius: 7px 3px;
}

جربها بنفسك

CSS border radius value1 value2 value3

تُستخدم الخاصية border-radius: value1 value2 value3 في الإطار في لغة CSS لإعطاء الزاوية العلوية في اليسار حجم التدوير value1، ولإعطاء الزاوية العلوية في اليمين والزاوية السفلية في اليسار جحم التدوير value2، كما تعطى الزاوية السفلية في اليمين حجم التدوير value3.

p.round
 {
  border: 2px solid red;
  border-radius: 10px 7px 3px;
}

جربها بنفسك

border-radius: value1 value2 value3 value4

تُستخدم الخاصية border-radius: value1 value2 value3 value4 في الإطار في لغة CSS لإعطاء الزاوية العلوية في اليسار حجم التدوير value1، ولإعطاء الزاوية العلوية في اليمين جحم التدوير value2، كما تُعطى الزاوية السفلية في اليمين حجم التدوير value3. ويتم إعطاء الزاوية السفلية في اليسار حجم التدوير value4.

p
 {
  border: 2px solid red;
 border-radius: 3px 7px 5px 10px;
}

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

CSS Rounded Borders
الإطارات المستديرة في لغة CSS

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Rounded Borders CSS