CSS border-radius Property

border-radius என்பது border-ன் corner-களை வளைவாகவும், round shape-லும் வடிவமைக்க இந்த border-radius property பயன்படுகிறது.

actually border-radius property ஒரு shorthand property அதாவது border-top-left-radius, border-top-right-radius, border-bottom-right-radius மற்றும் border-bottom-left-radius ஆகியவைகளை சுருக்கமாக எழுத பயன்படும் ஒரு property-யே border-radius ஆகும்.

கீழ்க்கண்ட முறைகளில் border-radius-ஐ apply செய்யலாம்

• Four values - border-radius
• Three values - border-radius
• Two values - border-radius
• One value - border-radius

border-radius with four values

border-இன் அனைத்து corner-களுக்கும் தனி தனியாக values apply செய்யவே இவாறு குரிபிடபடுகிறது.

.fourval{
    width:200px;
    height:100px;
    padding:5px;
    text-align:center;
    background-color:#05756c;
    color:#fff;
    border-radius:10px 40px 20px 5px;
}

<div class="fourval">10px 40px 20px 5px</div>

anti clock wise, அதாவது 10px என்பது border-top-left-radius, 40px என்பது border-top-right-radius, 20px என்பது border-bottom-right-radius, 5px என்பது border-bottom-left-radius

border-radius with three values

முதல் value top-left corner-க்கு எடுத்து கொள்ளகிறது, இரண்டாம் value top-right-க்கும் bottom-left-க்கு எடுத்து கொள்ளகிறது, மூன்றாவது value bottom-right corner-க்கு எடுத்துகொள்கிறது.

.threeval{
    width:200px;
    height:100px;
    padding:5px;
    text-align:center;
    background-color:#05756c;
    color:#fff;
    border-radius:10px 40px 20px ;
}

<div class="threeval">10px 40px 20px</div>

border-radius with two values

முதல் value top-left-க்கும் bottom-right-க்கும் எடுத்து கொள்ளகிறது, இரண்டாம் value top-right-க்கும் and bottom-left-க்கும் எடுத்து கொள்ளகிறது

.twoval{
    width:200px;
    height:100px;
    padding:5px;
    text-align:center;
    background-color:#05756c;
    color:#fff;
    border-radius:10px 40px;
}

<div class="twoval">10px 40px</div>

border-radius with one value

ஒரே value அனைத்து corner-களுக்கும் எடுத்து கொள்ளகிறது

.oneval{
    width:200px;
    height:100px;
    padding:5px;
    text-align:center;
    background-color:#05756c;
    color:#fff;
    border-radius:10px;
}

<div class="oneval">10px</div>

Eclipse shape border-radius

width-ஐ அதிகமாகவும் height-ஐ குறைவாகவும் வைத்து கொண்டு radius-ஐ 50% ஆகா apply செய்வதால் இமாதிரியான shape கிடைக்கும்.

.eclipse{
    width:200px;
    height:100px;
    padding:5px;
    text-align:center;
    background-color:#05756c;
    color:#fff;
    border-radius:50%;
}

<div class="eclipse">eclipse</div>

Circle shape border-radius

width-ம் height-ம் ஒரே அளவாக வைத்து கொண்டு radius-ஐ 50% ஆகா apply செய்வதால் circle shape கிடைக்கும்.

.circle{
    width:200px;
    height:200px;
    padding:5px;
    text-align:center;
    background-color:#05756c;
    color:#fff;
    border-radius:50%;
}

<div class="circle">circle</div>