CSS border-radius کی خاصیت

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

border-radius ਵਿਸ਼ੇਸ਼ਤਾ ਇੱਕ ਸ਼ਾਰਟਕੈਟ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਜੋ ਚਾਰ border-*-radius ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸੈਟ ਕਰਦੀ ਹੈ。

ਸੁਝਾਅ:ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਤੁਹਾਨੂੰ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਪੱਖਰਾਂ ਦੇ ਗੋਲਾਕਾਰ ਬੋਰਡਰ ਜੋੜਨ ਦੀ ਇਜਾਜਤ ਦਿੰਦੀ ਹੈ!

ਇਸ ਨੂੰ ਦੇਖੋ:

CSS3 ਸਿੱਖਿਆਬੋਧਨ:CSS3 ਬੋਰਡਰ

ਉਦਾਹਰਣ

div ਅਤੇਲੈਮੈਂਟ ਨੂੰ ਗੋਲਾਕਾਰ ਬੋਰਡਰ ਜੋੜੋ:

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

ਖੁਦ ਦੱਸਦੇ ਹੋਏ ਪ੍ਰਯੋਗ ਕਰੋ

ਪੰਨੇ ਦੇ ਨੀਚੇ ਹੋਰ ਉਦਾਹਰਣ ਹਨ。

CSS ਵਿਧਾਨ

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

ਟਿੱਪਣੀ:ਇਸ ਕਰਤੇ ਨਾਲ ਹਰੇਕ radii ਦੇ ਚਾਰ ਮੁੱਲ ਨੂੰ ਸੈਟ ਕਰੋ। ਜੇਕਰ 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