سی ای ای اس کون

سی ای ای اس کون

کے ذریعہ CSS border-radius سائطج، کسی بھی عنصر کا 'کورنر' سائٹل کرسکتا ہے。

CSS border-radius کا اپنے

CSS border-radius کمیت عناصر کا کونوں کا مورخت سائز طے کرتی ہے。

تذکرہ:آپ اس کمیت کا استعمال کرسکتے ہیں تاکہ عناصر کا دائرہ کونوں کا مورخت سائز قائم کرسکتے ہیں!

یہ تین مثال ہیں:

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-radius
  • border-bottom-left-radius

CSS border-radius - کونوں کا مورخت سائز طے کرنا

border-radius کمیت کا استعمال ایک سے چار قیمت تک کیا جاسکتا ہے، قوانین کے مطابق:

چار قیمت - border-radius: 15px 50px 30px 5px;（کوئی قیمت کو کوئی قیمت کو کوئی قیمت کو کوئی قیمت کو استعمال کیا جاتا ہے）：

تیسری قیمت - border-radius: 15px 50px 30px;（پہلا قیمت کو چوتھے کونوں کے لئے استعمال کیا جاتا ہے، دوسرا قیمت کو چوتھے کونوں کے لئے استعمال کیا جاتا ہے، تیسرا قیمت کو چوتھے کونوں کے لئے استعمال کیا جاتا ہے）：

دو قیمت - border-radius: 15px 50px;（پہلا قیمت کو چوتھے کونوں کے لئے استعمال کیا جاتا ہے، دوسرا قیمت کو چوتھے کونوں کے لئے استعمال کیا جاتا ہے）：

ایک قیمت - border-radius: 15px;（یہ قیمت تمام چار کونوں کے لئے استعمال کی جاتی ہے، مورخت سائز ایک سے زیادہ ہیں）：

یہ کوڈ ہے:

مثال

#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 کا مورخت سائز کا حصول

کمیت وصف
border-radius یہ بندرگاہوں کی تمام چار border-*-*-radius اپنے مختصر بندرگاہ کا سیمل سائز سے قائم کراتا ہے۔
border-top-left-radius بنیادی کون کا بوردر کی شکل کا تعین کرنا
border-top-right-radius بنیادی کون کا بوردر کی شکل کا تعین کرنا
border-bottom-right-radius بنیادی کون کا بوردر کی شکل کا تعین کرنا
border-bottom-left-radius بنیادی کون کا بوردر کی شکل کا تعین کرنا