انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 38
دورة لغة CSS

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

سوف تتعلم في هذا الدرس كيفية عمل الإطارات المستديرة والتي تكون خارج حدود العنصر أعلي أو بعد border في لغة CSS.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
5
الأمثلة
13
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
4,910
محتوى الدرس
في هذا الدرس 5تصفّح المواضيع

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

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


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

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

border-radius syntax

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

HTML 
border-radius:value;

border-radius values

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

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

CSS Rounded Borders

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

HTML 
p 
{
  border: 2px solid red;
  border-radius: 5px;
}
جرّب بنفسك

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

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

CSS Borders Radius With Pixel

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

HTML 
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.

HTML 
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.

HTML 
p
 {
  border: 2px solid red;
  border-top-left-radius: 12px;
}
جرّب بنفسك

CSS border top right radius

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

HTML 
p
 {
  border: 2px solid red;
  border-top-right-radius: 12px;
}
جرّب بنفسك

CSS border bottom right radius

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

HTML 
p
 {
  border: 2px solid red;
  border-bottom-right-radius: 12px;
}
جرّب بنفسك

CSS border bottom left radius

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

HTML 
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.

HTML 
p
 {
  border: 2px solid red;
  border-radius: 5px;
}
جرّب بنفسك

CSS border radius: value1 value2

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

HTML 
p
 {
  border: 2px solid red;
  border-radius: 7px 3px;
}
جرّب بنفسك

CSS border radius value1 value2 value3

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

HTML 
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.

HTML 
p
 {
  border: 2px solid red;
 border-radius: 3px 7px 5px 10px;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات5

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 5 مفهومةأول بطاقة، أول خطوة
01 Rounded مدور / دائري
للمراجعة
02 Borders حدود
للمراجعة
03 Radius منتصف القطر / الكوع الجانبي
للمراجعة
04 Element عنصر
للمراجعة
05 Property خاصية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات1

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 1 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

1أسئلة 1أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي1 أسئلة تنتظرك
01

في ماذا تستخدم خاصية border-radius ؟