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 డిఫైన్ లెఫ్ట్ బోటమ్ బార్డర్ ఫార్మ్