زوايا مستديرة CSS

❮ سابق التالي ❯

زوايا مستديرة CSS

باستخدام خاصية CSS border-radius، يمكنك إعطاء أي عنصر "زوايا مستديرة".

خاصية CSS border-radius

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

نصيحة: تتيح لك هذه الخاصية إضافة زوايا مستديرة إلى العناصر!

فيما يلي ثلاثة أمثلة:

1. الزوايا الدائرية لعنصر بلون خلفية محدد:

زوايا مدورة!

2. الزوايا الدائرية لعنصر بحد:

زوايا مدورة!

3. الزوايا الدائرية لعنصر بصورة خلفية:

زوايا مدورة!

ها هو الكود:

مثال

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
background-repeat: repeat;
  padding: 20px;
  width: 200px;
  height: 150px;
}

نصيحة: الخاصية border-radiusهي في الواقع خاصية مختصرة لـ border-top-left-radius، و border-top-right-radius، وخصائص.border-bottom-right-radiusborder-bottom-left-radius

نصف قطر حدود CSS - حدد كل زاوية

يمكن أن يكون border-radiusللخاصية من واحد إلى أربع قيم. فيما يلي القواعد:

أربع قيم - نصف قطر الحدود: 15 بكسل 50 بكسل 30 بكسل 5 بكسل ؛ (تنطبق القيمة الأولى على الزاوية العلوية اليسرى ، والقيمة الثانية تنطبق على الزاوية العلوية اليمنى ، والقيمة الثالثة تنطبق على الزاوية اليمنى السفلية ، والقيمة الرابعة تنطبق على الزاوية اليسرى السفلية):

ثلاث قيم - نصف قطر الحد: 15 بكسل 50 بكسل 30 بكسل ؛ (تنطبق القيمة الأولى على الزاوية العلوية اليسرى ، والقيمة الثانية تنطبق على الزوايا العلوية اليمنى والسفلية اليسرى ، والقيمة الثالثة تنطبق على الزاوية اليمنى السفلية):

قيمتان - نصف قطر الحد: 15 بكسل 50 بكسل ؛ (تنطبق القيمة الأولى على الزوايا العلوية اليسرى والسفلية اليمنى ، وتنطبق القيمة الثانية على الزوايا العلوية اليمنى والسفلية اليسرى):

قيمة واحدة - نصف قطر الحد: 15 بكسل ؛ (تنطبق القيمة على جميع الزوايا الأربع ، والتي يتم تقريبها بشكل متساوٍ:

ها هو الكود:

مثال

#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
height: 150px;
}

#rcorners4 {
  border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
  height: 150px;
}

يمكنك أيضًا إنشاء زوايا بيضاوية:

مثال

#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
  width: 200px;
  height: 150px;
}

خصائص CSS Rounded Corners

Property	Description
border-radius	A shorthand property for setting all the four border---radius properties
border-top-left-radius	Defines the shape of the border of the top-left corner
border-top-right-radius	Defines the shape of the border of the top-right corner
border-bottom-right-radius	Defines the shape of the border of the bottom-right corner
border-bottom-left-radius	Defines the shape of the border of the bottom-left corner

❮ سابق التالي ❯

دروس CSS

CSS متقدم

استجابة CSS

شبكة CSS

CSS SASS

أمثلة CSS

مراجع CSS

زوايا مستديرة CSS