CSS ਗੋਲ ਕੋਣ

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-top-left-radius کچھ کوئی اُپر کونے کا بوردر کی شکل کا تعریف کرنا
border-top-right-radius کچھ کوئی اُپر کونے کا بوردر کی شکل کا تعریف کرنا
border-bottom-right-radius کچھ کوئی پچھلے کونے کا بوردر کی شکل کا تعریف کرنا
border-bottom-left-radius کچھ کوئی نچلے کونے کا بوردر کی شکل کا تعریف کرنا