ਮੁਫ਼ਤ CSS ਬਾਰਡਰ ਰੇਡੀਅਸ ਜਨਰੇਟਰ

ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

border-radius ਜਨਰੇਟਰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦਾ ਹੈ — ਕੋਈ ਸਰਵਰ, ਲਾਇਬ੍ਰੇਰੀ ਜਾਂ ਅੱਪਲੋਡ ਨਹੀਂ। ਇਹ React state ਅਤੇ useMemo ਵਰਤ ਕੇ ਸਿੱਧੇ JavaScript ਵਿੱਚ CSS border-radius ਮੁੱਲ string ਬਣਾਉਂਦਾ ਹੈ, ਫਿਰ ਇਸਨੂੰ ਇੱਕ ਲਾਈਵ div element 'ਤੇ inline style ਵਜੋਂ ਲਾਉਂਦਾ ਹੈ ਤਾਂ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਆਪਣਾ CSS ਇੰਜਣ ਰੀਅਲ ਟਾਈਮ ਵਿੱਚ ਆਕਾਰ ਬਣਾਏ।

1. 1
   ਸਲਾਈਡਰ state ਲਿਖਦੇ ਹਨ

   ਹਰ range input ਅੱਠ ਅੰਕੀ state variables ਵਿੱਚੋਂ ਇੱਕ ਵਿੱਚ ਲਿਖਦਾ ਹੈ — ਚਾਰ ਲੇਟਵੇਂ ਕੋਨਾ radii ਅਤੇ ਅੰਡਾਕਾਰ ਮੋਡ ਲਈ ਚਾਰ ਖੜ੍ਹਵੇਂ। ਇਕੱਠਾ ਮੋਡ setAll helper ਰਾਹੀਂ ਸਾਰੇ ਅੱਠਾਂ ਨੂੰ ਇੱਕ ਸਲਾਈਡਰ ਵਿੱਚ ਜੋੜ ਦਿੰਦਾ ਹੈ ਜੋ ਹਰ ਮੁੱਲ ਇੱਕੋ ਵਾਰ ਸਿੰਕ ਕਰਦਾ ਹੈ।
2. 2
   useMemo CSS ਮੁੱਲ ਜੋੜਦਾ ਹੈ

   ਇੱਕ useMemo hook ਜਦੋਂ ਵੀ ਕੋਈ ਕੋਨਾ ਮੁੱਲ, ਇਕਾਈ (px ਜਾਂ %), ਜਾਂ ਅੰਡਾਕਾਰ ਟੌਗਲ ਬਦਲਦਾ ਹੈ, border-radius string ਮੁੜ ਗਿਣਦਾ ਹੈ। ਮਿਆਰੀ ਮੋਡ ਵਿੱਚ ਇਹ ਚਾਰ-ਮੁੱਲ ਸੰਖੇਪ ਬਣਾਉਂਦਾ ਹੈ; ਅੰਡਾਕਾਰ ਚਾਲੂ ਹੋਣ 'ਤੇ, ਪੂਰੇ ਅੱਠ-ਮੁੱਲ ਸਿੰਟੈਕਸ ਲਈ slash ਵਿਭਾਜਕ ਜੋੜਦਾ ਹੈ — ਜਿਵੇਂ 32px 20px 20px 32px / 20px 32px 20px 32px।
3. 3
   ਬ੍ਰਾਊਜ਼ਰ CSS ਇੰਜਣ ਝਲਕ ਬਣਾਉਂਦਾ ਹੈ

   ਗਿਣੀ string ਇੱਕ ਸਾਦੇ div element 'ਤੇ inline borderRadius style ਵਜੋਂ ਸੈੱਟ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਸਾਰਾ ਰੈਂਡਰਿੰਗ ਬ੍ਰਾਊਜ਼ਰ ਦਾ layout ਇੰਜਣ ਕਰਦਾ ਹੈ — ਕੋਈ canvas, SVG ਜਾਂ ਤੀਜੀ-ਧਿਰ ਡਰਾਇੰਗ ਕੋਡ ਨਹੀਂ।
4. 4
   Clipboard API ਆਉਟਪੁੱਟ ਕਾਪੀ ਕਰਦੀ ਹੈ

   ਕਾਪੀ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਨਾਲ, ਚੁਣੇ ਫਾਰਮੈਟ ਟੌਗਲ ਮੁਤਾਬਕ, CSS declaration (border-radius: ...;) ਜਾਂ ਬਰਾਬਰ Tailwind arbitrary-value class (rounded-[...]) ਨਾਲ navigator.clipboard.writeText ਕਾਲ ਹੁੰਦਾ ਹੈ।

ਸੰਬੰਧਿਤ ਟੂਲ