CSS బార్డర్ రేడియస్ అట్రిబ్యూట్

నిర్వచనం మరియు వినియోగం

border-radius లక్షణం నాలుగు border-*-radius లక్షణలను అమర్చడానికి ఉపయోగించే సరళీకృత లక్షణం ఉంది.

సలహా:ఈ లక్షణం మీరు ఎల్లా ఎలిమెంట్కు కర్ణాలను కలపడానికి అనుమతిస్తుంది!

ఇతర లింకులు చూడండి:

CSS3 పాఠ్యక్రమం:CSS3 బార్డర్

ఉదాహరణ

డివ్ ఎలిమెంట్కు కర్ణాలను కలపడం మొదలు పెట్టండి:

div
{
border:2px solid;
border-radius:25px;
}

స్వయంగా ప్రయత్నించండి

పేజీ కిందికి మరిన్ని ఉదాహరణలు ఉన్నాయి。

CSS సంకేతాలు

border-radius: 1-4 length|% / 1-4 length|%;

అన్నారు:ఈ క్రమంలో ప్రతి రేడియస్ నాలుగు విలువలను అమర్చండి. bottom-left ను సంక్షిప్తంగా వదిలిపోతే, top-right తో అదే విలువ ఉంటుంది. bottom-right ను సంక్షిప్తంగా వదిలిపోతే, top-left తో అదే విలువ ఉంటుంది. top-right ను సంక్షిప్తంగా వదిలిపోతే, top-left తో అదే విలువ ఉంటుంది.

లక్షణ విలువ

విలువ వివరణ పరీక్షించండి
length కర్ణాల రూపాలను నిర్వచించండి。 పరీక్షించండి
% శతలకు అనుసరించి కర్ణాల రూపాలను నిర్వచించండి。 పరీక్షించండి

ఉదాహరణ 1

border-radius:2em;

సమానం కాగలదు:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

ఉదాహరణ 2

border-radius: 2em 1em 4em / 0.5em 3em;

సమానం కాగలదు:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

సాంకేతిక వివరాలు

అప్రమేయ విలువ: 0
పారంతరణ సామర్థ్యం: no
వెర్షన్: CSS3
JavaScript సంకేతాలు: object.style.borderRadius="5px"

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ని చెప్పుతాయి。

క్రోమ్ IE / ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5