CSS 圆角

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 డాల్స్ లోపల కోను ఆకారం నిర్వహించండి.