ബ്ലോക്കുകളിൽ വൃത്താകൃതിയിലുള്ള കോണുകൾ ഉണ്ടാക്കുന്നത് ഒരു വലിയ പ്രശ്നമാണെന്ന് എല്ലാവർക്കും അറിയാമെന്ന് ഞാൻ കരുതുന്നു. ഇതുവരെ JS ക്രച്ചസ് ഉപയോഗിക്കാതെ ക്രോസ്-ബ്രൗസർ പരിഹാരമില്ല. IE9 പുറത്തിറങ്ങുന്നതോടെ തലവേദന കുറയും, എന്നാൽ നിങ്ങൾ ഇപ്പോഴും IE6/7 കോഡിംഗ് തിരക്കിലാണെങ്കിൽ, ഇത് നിങ്ങൾക്ക് ഒരു രക്ഷയാകില്ല. എന്നാൽ IE6/7 വിസ്മൃതിയിൽ മുങ്ങിയാലും, ബോർഡർ-റേഡിയസ് പാരാമീറ്ററിനെ പിന്തുണയ്‌ക്കാത്ത ഈ ബ്രൗസറിന്റെ 8-ാം പതിപ്പിനെക്കുറിച്ച് നമ്മൾ മറക്കാൻ ഇനിയും ഒരുപാട് സമയമെടുക്കും. മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, ഞങ്ങളുടെ സൈറ്റുകൾ വളരെക്കാലം JavaScript സ്റ്റിറോയിഡുകളിൽ പ്രവർത്തിക്കും.

വൃത്താകൃതിയിലുള്ള രൂപങ്ങൾ എന്ന വിഷയത്തിൽ ധാരാളം ലേഖനങ്ങൾ എഴുതിയിട്ടുണ്ട്, എന്നാൽ അവയെല്ലാം (എനിക്ക് കണ്ടെത്താൻ കഴിയുന്നവ) നിലവിലുള്ള ഒരു പ്രശ്നത്തിന് പരിഹാരങ്ങൾ ഉപയോഗിക്കുന്നതിന്റെ സൂക്ഷ്മതകളെക്കുറിച്ചും സൂക്ഷ്മതകളെക്കുറിച്ചും നിശബ്ദമാണ്. ജനപ്രിയ പരിഹാരങ്ങൾ ഉപയോഗിക്കുമ്പോൾ ഞാൻ നേരിട്ട എല്ലാ ബുദ്ധിമുട്ടുകളും പട്ടികപ്പെടുത്താൻ ഞാൻ ശ്രമിക്കും.

ആരംഭിക്കുന്നതിന്, സാഹചര്യം എങ്ങനെ മാറുന്നു എന്നതിനെക്കുറിച്ച് ഞാൻ കുറച്ച് വാക്കുകൾ പറയും അതിർത്തി-ആരംപുതിയ ബ്രൗസർ പതിപ്പുകൾ പുറത്തിറങ്ങുമ്പോൾ.

ഒന്നാമതായി, FireFox-ന്റെ പതിപ്പ് 4-ന് ഇനി സ്വന്തം -moz-border-radius പാരാമീറ്റർ ആവശ്യമില്ല. IE9, ഞാൻ ഇതിനകം പറഞ്ഞതുപോലെ, ബോർഡർ-റേഡിയസിനുള്ള പിന്തുണയും നടപ്പിലാക്കുന്നു, കുറഞ്ഞത് ആർ‌സി പതിപ്പിലെങ്കിലും അത് നിലവിലുണ്ട്. പതിപ്പ് 10.5 മുതൽ ഓപ്പറയിൽ എല്ലാം മികച്ചതാണ്.

ദൈവം തള്ളിക്കളഞ്ഞവർക്കുള്ള പരിഹാരങ്ങൾ.

അതിനാൽ, ഏറ്റവും അറിയപ്പെടുന്നതും ഉപയോഗിക്കുന്നതുമായ രണ്ട് രീതികളുണ്ട് ബോർഡർ-റേഡിയസ് ക്രോസ് ബ്രൗസർ ഉണ്ടാക്കുക. ആദ്യത്തേത് Curved-corner ആണ്, അത് ഉപയോഗിക്കുന്നു VML ഉം പെരുമാറ്റവും. രണ്ടാമത്തേത് CSS3 PIE ആണ്, ഇതിന് രണ്ട് നടപ്പിലാക്കലുകൾ ഉണ്ട്. ഒന്ന് VML-നെയും പെരുമാറ്റത്തെയും അടിസ്ഥാനമാക്കിയുള്ളതാണ്, രണ്ടാമത്തേത് ഒരു JavaScript ലൈബ്രറിയാണ്.

രണ്ട് പരിഹാരങ്ങളും നമുക്ക് പരിഗണിക്കാം.

വളഞ്ഞ മൂല

ഞാൻ ഒരു നേട്ടം മാത്രം കണ്ടെത്തി - ഉൾപ്പെടുത്തിയ border-radius.htc ഫയലിന്റെ ഭാരം കുറഞ്ഞതാണ്. നിലവിലുള്ള പതിപ്പ്നടപ്പിലാക്കാൻ 5kb മാത്രമേ എടുക്കൂ. 33 kb ഭാരമുള്ള PIE-യ്‌ക്കെതിരെ, ഇത് തീർച്ചയായും ഒരു പ്രധാന നേട്ടമാണ്. പക്ഷേ, പോസിറ്റീവുകൾ അവസാനിക്കുന്നത് അവിടെയാണ്, കുറഞ്ഞത് എന്നെ സംബന്ധിച്ചിടത്തോളം.

പോരായ്മകൾ ഒരുപാടുണ്ട്. ഉദാഹരണത്തിന്, ഇനിപ്പറയുന്ന നിർമ്മാണം പ്രവർത്തിക്കില്ല:

#selector (ബോർഡർ: #c6c5c2 1px സോളിഡ്; ബോർഡർ-ടോപ്പ്: ഒന്നുമില്ല; ബോർഡർ-റേഡിയസ്: 0 0 6px 6px; പശ്ചാത്തലം: #f0ecdf; പെരുമാറ്റം: url(border-radius.htc); )

ഒന്നാമതായി, നിങ്ങൾക്ക് ഒരു വശത്ത് നിന്ന് ഫ്രെയിം നീക്കംചെയ്യാൻ കഴിയില്ല. അതായത്, ബോർഡർ-ടോപ്പ് പാരാമീറ്റർ മുഴുവൻ ബ്ലോക്കിലേക്കും ഒരു ബോർഡർ ചേർക്കും, എന്നിരുന്നാലും കോണുകൾ വൃത്താകൃതിയിലായിരിക്കും. ഇത് തമാശയാണ്, പക്ഷേ ബോർഡർ-ബോട്ടം പാരാമീറ്റർ ഫ്രെയിമിനെ സ്ഥാനത്ത് നിർത്തും, പക്ഷേ ഒരു ഫലവും നൽകില്ല, അതായത്, ബോർഡർ മുഴുവൻ ബ്ലോക്കിന് ചുറ്റും നിലനിൽക്കും.

രണ്ടാമതായി, ഉദാഹരണത്തിലെന്നപോലെ നിങ്ങൾക്ക് രണ്ട് കോണുകൾ മാത്രം ട്രിം ചെയ്യണമെങ്കിൽ, നിങ്ങൾ നിരാശനാകും. വളഞ്ഞ മൂലഅത് ചെയ്യാൻ കഴിയില്ല. ഇതിന് ബ്ലോക്കിന്റെ എല്ലാ കോണുകളും തുല്യ റേഡിയസ് മൂല്യത്തിൽ മാത്രമേ റൗണ്ട് ചെയ്യാൻ കഴിയൂ. വ്യത്യസ്‌ത വക്രതയുള്ള റേഡിയോടുകൂടിയ കോണുകൾ നേടാനാവില്ല. ശരിയായതും പ്രവർത്തിക്കുന്നതുമായ പതിപ്പ് ഇതുപോലെ കാണപ്പെടുന്നു:

#selector (ബോർഡർ: #c6c5c2 1px സോളിഡ്; ബോർഡർ-റേഡിയസ്: 6px; സ്വഭാവം: url(border-radius.htc); )

മൂന്നാമതായി, ഒരു ഇമേജ് പശ്ചാത്തലമായി ഉള്ള ബ്ലോക്കുകൾക്ക് Curved-corner പ്രവർത്തിക്കില്ല.

ശരി, അവസാനത്തേത് അസുഖകരമായ നിമിഷം- ജോലിയുടെ വേഗത. കോണുകൾ ഉടനടി വൃത്താകൃതിയിലല്ല. പേജ് ലോഡ് ചെയ്യുന്ന നിമിഷം മുതൽ കോണുകൾ എടുക്കുന്നത് വരെ ആവശ്യമായ ഫോം, ഏകദേശം ഒരു സെക്കന്റ് എടുക്കും. ദൃശ്യപരമായി, കാലതാമസം വളരെ ശ്രദ്ധേയവും വ്യക്തമായി ശ്രദ്ധിക്കപ്പെടുന്നതുമാണ്.

മറ്റ് ചില പ്രശ്നങ്ങൾ ഉണ്ടായിരുന്നു (വിശദാംശങ്ങൾ വായിക്കുക), പക്ഷേ ഇപ്പോൾ എനിക്ക് ഓർമ്മയില്ല.

ചുരുക്കത്തിൽ, ഈ പരിഹാരം വളരെ ലളിതമായ ജോലികൾക്ക് മാത്രം അനുയോജ്യമാണെന്ന് നമുക്ക് പറയാം. പ്രാക്ടീസ് കാണിക്കുന്നതുപോലെ, അത്തരം ലളിതമായ ജോലികൾ വളരെ അപൂർവമായി മാത്രമേ നേരിടാറുള്ളൂ.

CSS3 PIE

അതിന് വലിയ ഭാരം ഉണ്ട്, നിങ്ങൾക്ക് ഒന്നും പറയാൻ കഴിയില്ല. PIE 1.0 ബീറ്റ 4 പതിപ്പ് .htc നടപ്പിലാക്കലിലും js അനലോഗിലും 33 kb എടുക്കുന്നു. എന്നാൽ അതേ സമയം, CSS3 PIE-ന് Curved-corner ഉള്ള ബോർഡർ-റേഡിയസിന്റെ എല്ലാ പ്രശ്നങ്ങളും ഇല്ല. ആവശ്യമില്ലാത്ത ഒരു JS നടപ്പിലാക്കാനുള്ള കഴിവും ഞാൻ ശരിക്കും ഇഷ്ടപ്പെടുന്നു അധിക കോഡ് CSS-ൽ, ഏത് സെലക്ടറിലും ഹുക്ക് ചെയ്യാം (ഉദാഹരണത്തിന്, jQuery ഉപയോഗിക്കുമ്പോൾ).

CSS3 PIE ന് റെൻഡറിംഗിലും കാലതാമസം ഉണ്ട് (ചിലപ്പോൾ ഇല്ല), എന്നാൽ ഇത് Curved-corner-ന്റെ കാര്യത്തേക്കാൾ വളരെ കുറവാണ്. ഇത് മിക്കവാറും അദൃശ്യമാണ്, ഇത് ലൈബ്രറിയെ വളരെ ആകർഷകവും ഉപയോഗയോഗ്യവുമാക്കുന്നു.

ശരി, CSS3 PIE പ്രശ്നം മാത്രമല്ല പരിഹരിക്കുന്നു എന്നതാണ് വലിയ കാര്യം അതിർത്തി-ആരം, മാത്രമല്ല മൈക്രോസോഫ്റ്റ് ബ്രൗസറുകളിലേക്ക് ഗണ്യമായ എണ്ണം CSS3 പ്രോപ്പർട്ടികൾ ചേർക്കുന്നു. ഇങ്ങനെയാണ്, ഉദാഹരണത്തിന്, ബോർഡർ-ഇമേജ്, ബോക്സ്-ഷാഡോ, ഗ്രേഡിയന്റുകളിൽ പ്രവർത്തിക്കുന്നതിനുള്ള പ്രോപ്പർട്ടികൾ പ്രവർത്തിക്കുന്നത്. പ്രശ്നം പരിഹരിക്കപ്പെടുകയാണ് png സുതാര്യതഅതോടൊപ്പം തന്നെ കുടുതല്. ഇവയെല്ലാം CSS3 PIE-യുടെ വലുപ്പത്തിന് പ്രസിദ്ധമായ നഷ്ടപരിഹാരം നൽകുകയും വിശദീകരിക്കുകയും ചെയ്യുന്നു.

ഇപ്പോഴും തൈലത്തിൽ പറക്കുന്നു

കഷ്ടം, CSS3 PIE-നോ Curved-corner-നോ എല്ലാ വിള്ളലുകളും പ്ലഗ് ചെയ്യാൻ കഴിയില്ല. അതിനാൽ, ഉദാഹരണത്തിന്, തുടക്കത്തിൽ മറഞ്ഞിരിക്കുന്ന ഘടകങ്ങൾക്കായി നിങ്ങൾക്ക് വൃത്താകൃതിയിലുള്ള കോണുകൾ ലഭിക്കില്ല - അവയ്ക്ക് ഡിസ്പ്ലേ ഉണ്ട്: പാരാമീറ്റർ ഒന്നുമില്ല. അതുപോലെ ദൃശ്യമായ പാരാമീറ്ററും അതിന്റെ മറഞ്ഞിരിക്കുന്ന മൂല്യവും. മൂലകം പൂർണ്ണമായും സ്ഥാനം പിടിച്ചാൽ പ്രശ്നങ്ങൾ ഉണ്ടാകാം. അയ്യോ, തരൂ വിശദമായ വിവരണംഎനിക്ക് സാഹചര്യം വിവരിക്കാൻ കഴിയില്ല, കാരണം പ്രശ്നങ്ങൾ ഉണ്ടായ സാഹചര്യങ്ങൾ ആവർത്തിക്കാൻ എനിക്ക് കഴിഞ്ഞില്ല, പക്ഷേ തീർച്ചയായും പ്രശ്നങ്ങൾ ഉണ്ടെന്ന് ഞാൻ ഓർക്കുന്നു.

എനിക്കറിയാവുന്ന ഒരു ക്യാച്ച് കൂടിയുണ്ട്. ഒരു മൂലകത്തിന് മുകളിൽ മൗസ് ഹോവർ ചെയ്യുമ്പോൾ ബോർഡർ-റേഡിയസ് പ്രയോഗിക്കുന്നതിന്, ഇതുപോലെ:

എ:ഹോവർ (പശ്ചാത്തലം: #cc; നിറം: #000; ബോർഡർ: #ccc 1px സോളിഡ്; ബോർഡർ-റേഡിയസ്: 6px )

ഈ മൂലകത്തിന് തുടക്കത്തിൽ വൃത്താകൃതിയിലുള്ള കോണുകൾ ഉണ്ടായിരിക്കേണ്ടത് ആവശ്യമാണ്, അല്ലാത്തപക്ഷം ഒരു ഫലവും ഉണ്ടാകില്ല. അതായത്, ഇൻ ഈ ഉദാഹരണത്തിൽ, ബോർഡർ-റേഡിയസും ബോർഡർ വ്യക്തമാക്കിയിരിക്കുന്നതും ഉള്ള ഒരു സെലക്ടർ എ ഉണ്ടായിരിക്കണം:

A (പശ്ചാത്തലം: #fff; നിറം: #000; ബോർഡർ: #fff 1px സോളിഡ്; ബോർഡർ-റേഡിയസ്: 6px ) a:ഹോവർ (പശ്ചാത്തലം: #ccc; നിറം: #000; ബോർഡർ: #ccc 1px സോളിഡ്; ബോർഡർ-റേഡിയസ്: 6px)

ഫലം

എനിക്ക് വ്യക്തിപരമായി, എന്റെ ഏറ്റവും പ്രിയപ്പെട്ടത് CSS3 PIE ആണ്. ഇത് ശരിക്കും അതിന്റെ ജോലി ചെയ്യുന്നു, അത് നന്നായി ചെയ്യുന്നു. കൂടാതെ, ലൈബ്രറി വികസിപ്പിക്കുന്നു. ഈ വികസനം പുതിയ പതിപ്പുകളുടെ പതിവ് റിലീസിനൊപ്പമുണ്ട്, ഇത് വളരെ പ്രോത്സാഹജനകമാണ്.

ബോർഡർ css പ്രോപ്പർട്ടി നിങ്ങൾക്ക് ഇതിനകം പരിചിതമാണെന്ന് എനിക്ക് ഉറപ്പുണ്ട്. css ബോർഡറിനെക്കുറിച്ച് നിങ്ങൾക്ക് മുമ്പ് അറിയാത്ത എന്തെങ്കിലും പുതിയതായി പഠിക്കുമോ? ശരി, നിങ്ങൾ പഠിക്കുക മാത്രമല്ല, നിങ്ങൾക്ക് മുമ്പ് അറിയാത്ത നിരവധി പുതിയ കാര്യങ്ങളും നിങ്ങൾ കാണും!

വൃത്താകൃതിയിലുള്ള കോണുകൾ സൃഷ്ടിക്കാൻ CSS3 മാത്രമല്ല, സങ്കീർണ്ണമായ രൂപങ്ങൾ സൃഷ്ടിക്കാൻ ശുദ്ധമായ CSS കോഡും ഉപയോഗിക്കാം. മുമ്പ്, വൃത്താകൃതിയിലുള്ള കോണുകളുടെ രൂപം സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് പശ്ചാത്തല-ചിത്രം ഉപയോഗിക്കാം. ബോർഡർ ഉപയോഗിക്കുന്നതിനുള്ള പുതിയ സാങ്കേതിക വിദ്യകൾക്ക് നന്ദി, ശുദ്ധമായ CSS കോഡ് ഉപയോഗിച്ച് ഞങ്ങൾക്ക് ഇത് ചെയ്യാൻ കഴിയും.

css ബോർഡർ ഉപയോഗിക്കുന്നതിനുള്ള അടിസ്ഥാനകാര്യങ്ങൾ

ഒരുപക്ഷേ നിങ്ങൾക്ക് ഇതിനകം പരിചിതമായിരിക്കും സാധാരണ ഉപയോഗംഅതിർത്തി സവിശേഷതകൾ:

ബോർഡർ: 1px കട്ടിയുള്ള കറുപ്പ്;

മുകളിലെ കോഡ് 1px ബോർഡർ ഔട്ട്പുട്ട് ചെയ്യും, അത് കറുപ്പ് ആയിരിക്കും. ലളിതമായും എളുപ്പത്തിലും. നിങ്ങൾക്ക് വാക്യഘടന അല്പം വികസിപ്പിക്കാനും കഴിയും:

ബോർഡർ വീതി: കട്ടിയുള്ള; ബോർഡർ-സ്റ്റൈൽ: സോളിഡ്; അതിർത്തി നിറം: കറുപ്പ്;

ഒരു അധികമായി, നിങ്ങൾക്ക് പ്രത്യേക മൂല്യങ്ങൾ ഉപയോഗിക്കാം അതിർത്തി പ്രോപ്പർട്ടികൾ- വീതി, മൂന്ന് കീവേഡുകൾ: നേർത്ത, ഇടത്തരം, കട്ടിയുള്ള.

എന്നാൽ വിപുലീകൃത വാക്യഘടന ഉപയോഗിക്കുന്നത് എല്ലായ്പ്പോഴും പ്രായോഗികമല്ല. മൗസ് ഹോവർ ചെയ്യുമ്പോൾ ഒരു ബ്ലോക്ക് ഫ്രെയിമിന്റെ നിറം മാറ്റേണ്ടിവരുമ്പോൾ ഒരു ഉദാഹരണം നോക്കാം. ഈ സാഹചര്യത്തിൽ, ചുരുക്കെഴുത്ത് വാക്യഘടന ഉപയോഗിക്കുന്നത് വളരെ ലളിതമാണ്:

ബോക്സ് (ബോർഡർ: 1 പിക്സൽ സോളിഡ് റെഡ്; ) .ബോക്സ്: ഹോവർ (ബോർഡർ: 1 പിക്സൽ സോളിഡ് ഗ്രീൻ; )

ഇത് ചെയ്യുന്നതിനുള്ള കൂടുതൽ മനോഹരവും ലളിതവുമായ മാർഗ്ഗം ഇതാണ്:

ബോക്സ് (ബോർഡർ: 1px ഖര ചുവപ്പ്; ) .box: ഹോവർ (ബോർഡർ-നിറം: പച്ച; )

നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഞങ്ങൾ ചില പ്രോപ്പർട്ടികൾ മാത്രം മാറ്റുമ്പോൾ വിപുലമായ സാങ്കേതികത ഉപയോഗപ്രദമാണ്: വീതി, ശൈലി, നിറം എന്നിവയും മറ്റുള്ളവയും.

ബോർഡർ-റേഡിയസ്

അതിർത്തി-ആരം- ഇതാണ് CSS3 ന്റെ "സുവർണ്ണ" പ്രോപ്പർട്ടി - പ്രായോഗികവും ഉപയോഗപ്രദവുമായ ആദ്യത്തെ, ഏറ്റവും സാധാരണമായ സ്വത്ത്. IE8 ഉം ചുവടെയുള്ള പതിപ്പുകളും ഒഴികെ, എല്ലാ ബ്രൗസറുകളും ഇത് ഉപയോഗിച്ച് വൃത്താകൃതിയിലുള്ള കോണുകൾ പ്രദർശിപ്പിക്കുന്നു.

എന്നിരുന്നാലും, സ്റ്റൈലിംഗ് ശരിയായിരിക്കുന്നതിന് വെബ്കിറ്റിനും മോസില്ലയ്ക്കും പ്രത്യേക പ്രിഫിക്സുകൾ ഉപയോഗിക്കേണ്ടത് ആവശ്യമാണ്.

വെബ്കിറ്റ്-ബോർഡർ-റേഡിയസ്: 10px; -moz-ബോർഡർ-റേഡിയസ്: 10px; ബോർഡർ-റേഡിയസ്: 10px;

ഇക്കാലത്ത്, നമുക്ക് പ്രത്യേക പ്രിഫിക്സുകൾ നീക്കം ചെയ്യാനും സാധാരണ ബോർഡർ-റേഡിയസ് ഫോം ഉപയോഗിക്കാനും കഴിയും.

ബ്ലോക്കിന്റെ ഓരോ വശത്തിനും നമുക്ക് പ്രത്യേക മൂല്യങ്ങൾ ഉപയോഗിക്കാം എന്നതാണ് മറ്റൊരു പെർക്ക്:

ബോർഡർ-മുകളിൽ-ഇടത്-റേഡിയസ്: 20px; ബോർഡർ-മുകളിൽ-വലത്-റേഡിയസ്: 0; ബോർഡർ-താഴെ-വലത്-റേഡിയസ്: 30px; ബോർഡർ-ബോട്ടം-ഇടത്-റേഡിയസ്: 0;

മുകളിലെ കോഡിൽ, ബോർഡർ-മുകളിൽ-വലത്-റേഡിയസ്, ബോർഡർ-ബോട്ടം-ഇടത്-റേഡിയസ് എന്നിവ "നൾ" ആയി സജ്ജീകരിക്കുന്നത് അതിശയകരമായ ചില രൂപങ്ങൾ കൈവരിക്കാൻ കഴിയും. മൂലകത്തിന് ചില പ്രോപ്പർട്ടികൾ അവകാശപ്പെട്ടേക്കാം, അത് പുനഃസജ്ജമാക്കേണ്ടതുണ്ട്.

മാർജിനും പാഡിംഗും പോലെ, നമുക്ക് വാക്യഘടന കംപ്രസ് ചെയ്യാം:

/* മുകളിൽ ഇടത്, മുകളിൽ വലത്, താഴെ വലത്, താഴെ ഇടത് */ ബോർഡർ-റേഡിയസ്: 20px 0 30px 0;

ബോർഡർ-റേഡിയസ് പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നതിന്റെ ഉദാഹരണമായി, വെബ്‌സൈറ്റുകൾ രൂപകൽപ്പന ചെയ്യുമ്പോൾ ഡിസൈനർമാർ പലപ്പോഴും ഉപയോഗിക്കുന്ന ഒരു "നാരങ്ങ" ഞാൻ നിങ്ങൾക്ക് കാണിച്ചുതരാം:

നാരങ്ങ (വീതി: 200px; ഉയരം: 200px; പശ്ചാത്തലം: #F5F240; ബോർഡർ: 1px സോളിഡ് #F0D900; ബോർഡർ-റേഡിയസ്: 10px 150px 30px 150px; )

അടിസ്ഥാനകാര്യങ്ങൾക്കപ്പുറത്തേക്ക് പോകാം

പല ഡിസൈനർമാർക്കും, CSS ബോർഡർ പ്രോപ്പർട്ടികളുടെ മേഖലയിലെ എല്ലാ അറിവും ഇവിടെ അവസാനിക്കുന്നു. എന്നാൽ അതിശയകരമായ കാര്യങ്ങൾ സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് ഉപയോഗിക്കാവുന്ന മറ്റ് ചില രസകരമായ കാര്യങ്ങളുണ്ട്!

സങ്കീർണ്ണമായ css അതിർത്തി ഘടനകൾ

സങ്കീർണ്ണമായ ബോർഡർ ഘടനകൾ ഉപയോഗിച്ച് ഡിസൈനുകൾ സൃഷ്ടിക്കുന്നതിന് നിരവധി സാങ്കേതിക വിദ്യകളുണ്ട്. ഉദാഹരണത്തിന്, നമുക്ക് ഇനിപ്പറയുന്നവ നോക്കാം ...

ബോർഡർ-സ്റ്റൈൽ

ഞങ്ങൾ എല്ലായ്പ്പോഴും ഏറ്റവും പ്രശസ്തമായ പ്രോപ്പർട്ടികൾ സോളിഡ്, ഡാഷ്, ഡോട്ട് എന്നിവ ഉപയോഗിക്കുന്നു. എന്നാൽ ബോർഡർ ശൈലിയിലുള്ള മറ്റ് രണ്ട് പ്രോപ്പർട്ടികൾ ഉണ്ട്: ഗ്രോവ് ആൻഡ് റിഡ്ജ്.

ബോർഡർ: 20px ഗ്രോവ് #e3e3e3;

അല്ലെങ്കിൽ വിപുലമായ വാക്യഘടനയിൽ:

ബോർഡർ-വർണ്ണം: #e3e3e3; ബോർഡർ വീതി: 20px; ബോർഡർ-സ്റ്റൈൽ: ഗ്രോവ്;

ഈ ഗുണങ്ങൾ ഉപയോഗപ്രദമാണെങ്കിലും, അവ സങ്കീർണ്ണമായ ഫ്രെയിമുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള അടിസ്ഥാനമല്ല.

രൂപരേഖ

ഏറ്റവും ജനപ്രിയമായ സൃഷ്ടി സാങ്കേതികത ഇരട്ട ഫ്രെയിം- ഔട്ട്ലൈൻ പ്രോപ്പർട്ടി ഉപയോഗം.

ബോക്‌സ് (ബോർഡർ: 5px സോളിഡ് #292929; ഔട്ട്‌ലൈൻ: 5px സോളിഡ് #e3e3e3; )

ഈ രീതി മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു, എന്നിരുന്നാലും ഇത് ഞങ്ങളെ രണ്ട് ഫ്രെയിമുകളിലേക്ക് പരിമിതപ്പെടുത്തുന്നു. ചിലപ്പോൾ നിങ്ങൾ നിരവധി ലെയറുകൾ അടങ്ങുന്ന ഒരു ഗ്രേഡിയന്റ് ബോർഡർ സൃഷ്ടിക്കേണ്ടതുണ്ട്... പിന്നെ എങ്ങനെ?

കപട ഘടകങ്ങൾ

ഔട്ട്‌ലൈൻ ടെക്നിക് പോരാ, ബദൽ മാർഗങ്ങൾകപട ഘടകങ്ങൾ: മുമ്പും: ശേഷവും ഉപയോഗിക്കുക എന്നതാണ്. ഇതിനൊപ്പം നിങ്ങൾക്ക് ചേർക്കാം അധിക ഫ്രെയിമുകൾമൂലകത്തിലേക്ക്:

ബോക്‌സ് (വീതി: 200px; ഉയരം: 200px; പശ്ചാത്തലം: #e3e3e3; സ്ഥാനം: ആപേക്ഷികം; അതിർത്തി: 10px കട്ടിയുള്ള പച്ച; ) /* കണ്ടെയ്‌നറിന്റെ ഒരേ വീതിയിൽ രണ്ട് ബോക്സുകൾ സൃഷ്ടിക്കുക */ .ബോക്‌സ്: ശേഷം, .ബോക്‌സ്:മുമ്പ് ( ഉള്ളടക്കം: ""; സ്ഥാനം: കേവലം; മുകളിൽ: 0; ഇടത്: 0; താഴെ: 0; വലത്: 0; ) .ബോക്സ്: ശേഷം (ബോർഡർ: 5px കടും ചുവപ്പ്; രൂപരേഖ: 5px ഖര മഞ്ഞ; ) .ബോക്സ്:മുമ്പ് (ബോർഡർ : 10px ഖര നീല;)

ഇത് വളരെ ഗംഭീരമായി തോന്നുന്നില്ല, പക്ഷേ കുറഞ്ഞത് ഇത് പ്രവർത്തിക്കുന്നു. ഫ്രെയിമുകൾക്കുള്ളിലെ നിറങ്ങളുടെ ക്രമം കണ്ടുപിടിക്കാൻ അൽപ്പം ബുദ്ധിമുട്ടാണ്... പക്ഷേ നിങ്ങൾക്കത് മനസ്സിലാക്കാം.

ബോക്സ്-ഷാഡോ

സമാനമായ പ്രഭാവം സൃഷ്ടിക്കുന്നതിനുള്ള രസകരമായ "കുട്ടികളുടെ വഴി" CSS3 ബോക്സ്-ഷാഡോ പ്രോപ്പർട്ടി ഉപയോഗിക്കുക എന്നതാണ്:

ബോക്സ് (ബോർഡർ: 5px ഖര ചുവപ്പ്; ബോക്സ്-ഷാഡോ: 0 0 0 5px പച്ച, 0 0 0 10px മഞ്ഞ, 0 0 0 15px ഓറഞ്ച്; )

ഈ സാഹചര്യത്തിൽ, ഞങ്ങൾ കൂടുതൽ മിടുക്കരായിരുന്നു കൂടാതെ ഒരു സമർപ്പിത ബോക്സ്-ഷാഡോ പ്രോപ്പർട്ടി ഉപയോഗിച്ചു. x, y, ബ്ലർ പാരാമീറ്ററുകൾ പൂജ്യത്തിലേക്ക് മാറ്റുന്നതിലൂടെ, ഒന്നിലധികം ഫ്രെയിമുകൾ സൃഷ്ടിക്കാൻ നമുക്ക് വ്യത്യസ്ത നിറങ്ങൾ ഉപയോഗിക്കാം.

എന്നാൽ ഒരു പ്രശ്‌നമുണ്ട്: ബോക്‌സ്-ഷാഡോ പ്രോപ്പർട്ടി മനസ്സിലാക്കാത്ത പഴയ ബ്രൗസറുകളിൽ, ഒരു 5px ചുവന്ന ഫ്രെയിം മാത്രമേ ദൃശ്യമാകൂ.

“ഓർക്കുക! സൈറ്റ് ഡിസൈൻ ക്രോസ് ബ്രൗസറായി കാണണം, അതായത് എല്ലാ ബ്രൗസറുകളിലും ഒരേ പോലെ. പഴയ പതിപ്പുകൾ ഉൾപ്പെടെ."

കോണുകൾ മാറ്റുന്നു

ഉപയോഗിച്ചതിന് പുറമേ ലളിതമായ അർത്ഥംബോർഡർ-റേഡിയസ്, നമുക്ക് രണ്ട് വ്യത്യസ്തമായവ വ്യക്തമാക്കാം - അവയെ വേർതിരിക്കുക / തിരശ്ചീനവും ലംബവുമായ ആരം ഞങ്ങൾ സൂചിപ്പിക്കും.

ഉദാഹരണത്തിന്:

ബോർഡർ-റേഡിയസ്: 50px / 100px; /* തിരശ്ചീന ആരം, ലംബ ആരം */

... ഇത് ഇതിന് തുല്യമാണ്:

ബോർഡർ-മുകളിൽ-ഇടത്-റേഡിയസ്: 50px 100px; ബോർഡർ-മുകളിൽ-വലത്-റേഡിയസ്: 50px 100px; ബോർഡർ-താഴെ-വലത്-റേഡിയസ്: 50px 100px; ബോർഡർ-ബോട്ടം-ഇടത്-റേഡിയസ്: 50px 100px;

അദ്വിതീയ ബ്ലോക്ക് രൂപങ്ങൾ സൃഷ്ടിക്കുന്നതിന് ഈ സാങ്കേതികവിദ്യ അനുയോജ്യമാണ്. ഉദാഹരണത്തിന്, പൊതിഞ്ഞ പേപ്പർ ഇഫക്റ്റ് എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് ഇതാ:

ബോക്‌സ് (വീതി: 200px; ഉയരം: 200px; പശ്ചാത്തലം: #666; ബോർഡർ-മുകളിൽ-ഇടത്-ആരം: 15എം 1എം; ബോർഡർ-താഴെ-വലത്-റേഡിയസ്: 15എം 1എം; )

ബോർഡർ ഉപയോഗിച്ച് CSS ഫോമുകൾ

എലമെന്റുകൾ ഉപയോഗിക്കുമ്പോൾ നിങ്ങൾക്ക് എങ്ങനെ CSS ഫോമുകൾ സൃഷ്ടിക്കാമെന്ന് ഈ സാങ്കേതികത കാണിക്കുന്നു പൂജ്യം അളവുകൾഉയരവും വീതിയും. ആശ്ചര്യപ്പെട്ടോ? നമുക്ക് ഒരു ഉദാഹരണം നോക്കാം...

അടുത്ത കുറച്ച് ഉദാഹരണങ്ങൾക്കായി, ഞങ്ങൾ ഇനിപ്പറയുന്ന മാർക്ക്അപ്പ് ഉപയോഗിക്കും:

... കൂടാതെ ഇനിപ്പറയുന്ന അടിസ്ഥാന ശൈലിയും:

ബോക്സ് (വീതി: 200px; ഉയരം: 200px; പശ്ചാത്തലം: കറുപ്പ്; )

CSS രൂപങ്ങൾ ഉപയോഗിക്കുന്നതിനുള്ള ഏറ്റവും സാധാരണമായ ഉദാഹരണം ഒരു പൊതിയുന്ന അമ്പടയാളം സൃഷ്ടിക്കുന്നതാണ്. ഈ അമ്പടയാളത്തിന്റെ രഹസ്യം ഓരോ വശത്തിനും വ്യത്യസ്ത നിറങ്ങളുള്ള ഒരു ബോർഡർ സൃഷ്ടിക്കുന്നതിലാണ്. തുടർന്ന്, വീതിയും ഉയരവും ആട്രിബ്യൂട്ടുകൾ 0 ആയി സജ്ജമാക്കുക.

ഡിവി ബ്ലോക്കിലേക്ക് ആരോ ക്ലാസ് നൽകാം:

അമ്പടയാളം (വീതി: 0; ഉയരം: 0; ബോർഡർ-മുകളിൽ: 100px കടും ചുവപ്പ്; ബോർഡർ-വലത്: 100px ഖര പച്ച; ബോർഡർ-താഴെ: 100px ഖര നീല; ബോർഡർ-ഇടത്: 100px ഖര മഞ്ഞ; )

പ്രദർശിപ്പിക്കുന്നതിന്, ഞങ്ങൾ ആദ്യം വിപുലീകൃത വാക്യഘടന ഉപയോഗിക്കുന്നു. അടുത്തതായി, ഷോർട്ട്‌ഹാൻഡ് വാക്യഘടന ഉപയോഗിച്ച് നമുക്ക് അധിക കോഡ് നീക്കംചെയ്യാം:

അമ്പടയാളം (വീതി: 0; ഉയരം: 0; ബോർഡർ: 100px ഖര; അതിർത്തി-നിറം: ചുവപ്പ് പച്ച നീല മഞ്ഞ; )

രസകരമാണ്, അല്ലേ? ഇപ്പോൾ ഞങ്ങൾ ഇൻസ്റ്റാൾ ചെയ്യും സുതാര്യമായ നിറങ്ങൾനീല വശം ഒഴികെ എല്ലാ വശങ്ങളിലും.

അമ്പടയാളം (വീതി: 0; ഉയരം: 0; ബോർഡർ: 100px സോളിഡ്; ബോർഡർ-താഴെ-നിറം: നീല; )

ഇത് മികച്ചതായി മാറി! എന്നാൽ ഇത് വിരുദ്ധമാണ് സെമാന്റിക് ലേഔട്ട്, പേജിലേക്ക് ഒരു അമ്പടയാളം ചേർക്കാൻ, ഒരു .arrow div സൃഷ്ടിക്കുക. ഈ ആവശ്യത്തിനായി, നമുക്ക് കപട ഘടകങ്ങൾ ഉപയോഗിക്കാം, അതാണ് ഞങ്ങൾ ഇപ്പോൾ ചെയ്യാൻ പോകുന്നത്.

ഒരു സ്പീച്ച് ബബിൾ സൃഷ്ടിക്കുക

ഒരു സ്പീച്ച് ബബിൾ സൃഷ്ടിക്കാൻ, നമുക്ക് ഒരു ചെറിയ കഷണം ആവശ്യമാണ് ശുദ്ധമായ CSSകോഡും ഒരു ഡിവി ബ്ലോക്കും.

സ്പീച്ച് ബബിൾ (സ്ഥാനം: ആപേക്ഷികം; പശ്ചാത്തല നിറം: #292929; വീതി: 200px; ഉയരം: 150px; ലൈൻ-ഉയരം: 150px; /* ലംബമായി മധ്യഭാഗത്ത് */ നിറം: വെള്ള; ടെക്സ്റ്റ്-അലൈൻ: മധ്യഭാഗം; )

സ്പീച്ച്-ബബിൾ: ശേഷം (ഉള്ളടക്കം: ""; )

ഈ ഘട്ടത്തിൽ, ഞങ്ങൾ മുമ്പ് ഉണ്ടാക്കിയ അമ്പടയാളം സൃഷ്ടിക്കും, അത് മൂലകത്തിലേക്ക് ചേർക്കുക, അത് സ്ഥാപിക്കുക മാത്രമാണ് അവശേഷിക്കുന്നത്:

സ്പീച്ച്-ബബിൾ: ശേഷം (ഉള്ളടക്കം: ""; സ്ഥാനം: കേവലം; വീതി: 0; ഉയരം: 0; അതിർത്തി: 10px ഖര; ബോർഡർ-നിറം: ചുവപ്പ് പച്ച നീല മഞ്ഞ; )

അമ്പടയാളം താഴേക്ക് ചൂണ്ടിക്കാണിക്കണമെങ്കിൽ, മുകളിലുള്ളതൊഴികെ എല്ലാ ബോർഡറുകളും സുതാര്യമായി സജ്ജീകരിക്കേണ്ടതുണ്ട്.

സ്പീച്ച്-ബബിൾ: ശേഷം (ഉള്ളടക്കം: ""; സ്ഥാനം: കേവലം; വീതി: 0; ഉയരം: 0; ബോർഡർ: 10px ഖര; ബോർഡർ-മുകളിൽ-നിറം: ചുവപ്പ്; )

ഞങ്ങൾ ഈ CSS ഫോം സൃഷ്‌ടിക്കുമ്പോൾ, അമ്പടയാളത്തിന്റെ വലുപ്പം ഞങ്ങൾക്ക് പ്രത്യേകം വ്യക്തമാക്കാൻ കഴിയില്ല. പകരം, നമുക്ക് ബോർഡർ-വീഡ്ത്ത് പ്രോപ്പർട്ടി സജ്ജീകരിക്കാം, അത് അമ്പടയാളത്തിന് ഒരു വലുപ്പം നൽകും. മധ്യഭാഗത്ത് താഴെയുള്ള അമ്പടയാളത്തിന്റെ സ്ഥാനവും ഞങ്ങൾ സജ്ജമാക്കും. അതനുസരിച്ച്, ഇതിനായി ഞങ്ങൾ മുകളിൽ ഇടത് മൂല്യങ്ങൾ ഉപയോഗിക്കുന്നു.

സ്പീച്ച്-ബബിൾ: ശേഷം (ഉള്ളടക്കം: ""; സ്ഥാനം: കേവലം; വീതി: 0; ഉയരം: 0; ബോർഡർ: 15px ഖര; ബോർഡർ-മുകളിൽ-നിറം: ചുവപ്പ്; മുകളിൽ: 100%; ഇടത്: 50%; )

കൂടാതെ, ബ്ലോക്കിന് സമാനമായ ഒരു നിറം നൽകേണ്ടതുണ്ട്. ഓർക്കുക, പൊസിഷനിംഗ് ചെയ്യുമ്പോൾ, അദൃശ്യമായ (15px) മറ്റ് ബോർഡറുകളുടെ വലുപ്പം നിങ്ങൾ കണക്കിലെടുക്കേണ്ടതുണ്ട്. കോണുകളിൽ ബ്ലോക്ക് റൗണ്ടിംഗും ഞങ്ങൾ നൽകും.

സ്പീച്ച്-ബബിൾ ( /* … മറ്റ് ശൈലികൾ */ ബോർഡർ-റേഡിയസ്: 10px; ) .സ്പീച്ച്-ബബിൾ: ശേഷം (ഉള്ളടക്കം: ""; സ്ഥാനം: കേവലം; വീതി: 0; ഉയരം: 0; അതിർത്തി: 15px സോളിഡ്; ബോർഡർ-മുകളിൽ -നിറം: #292929; മുകളിൽ: 100%; ഇടത്: 50%; മാർജിൻ-ഇടത്: -15px; /* ബോർഡർ വീതി ക്രമീകരിക്കുക */ )

മോശമല്ല, അല്ലേ? നിരവധി CSS ക്ലാസുകളും ബോർഡർ തന്ത്രങ്ങളും ഉപയോഗിച്ച്, നിങ്ങൾക്ക് അത്തരമൊരു കാര്യം സൃഷ്ടിക്കാൻ കഴിയും.

/* സ്പീച്ച് ബബിൾസ് ഉപയോഗം: ക്ലാസ് .സ്പീച്ച്-ബബിൾ, .സ്പീച്ച്-ബബിൾ-ഡയറക്ഷൻ എന്നിവ താഴെ കാണിച്ചിരിക്കുന്നത് പോലെ പ്രയോഗിക്കുക

ബോണസ്! ബ്ലോക്കിനുള്ളിൽ ലംബ കേന്ദ്രീകരണം

ഒരു വരി വാചകത്തിന്, നിങ്ങൾക്ക് ലൈൻ-ഹൈറ്റ് ഉപയോഗിക്കാം. എന്നാൽ നിങ്ങൾക്ക് രണ്ടോ അതിലധികമോ വരി ടെക്‌സ്‌റ്റ് ഉണ്ടെങ്കിൽ... ഡിസ്‌പ്ലേ പ്രോപ്പർട്ടി ടേബിളിലേക്ക് സജ്ജീകരിച്ച് എല്ലാ വാചകങ്ങളും ഒരു ഖണ്ഡികയിൽ ഇടുക എന്നതാണ് ഏറ്റവും നല്ല പരിഹാരം. html മാർക്ക്അപ്പിൽ ഇത് ഇങ്ങനെയാണ് കാണപ്പെടുന്നത്:

സ്പീച്ച്-ബബിൾ ( /* മറ്റ് ശൈലികൾ */ ഡിസ്പ്ലേ: ടേബിൾ; ) .സ്പീച്ച്-ബബിൾ പി ( ഡിസ്പ്ലേ: ടേബിൾ-സെൽ; ലംബ-അലൈൻ: മിഡിൽ; )

ഞങ്ങൾ സ്വയം ത്രികോണങ്ങളിൽ ഒതുങ്ങുന്നില്ല. CSS-ന് വ്യത്യസ്ത രൂപങ്ങൾ പ്രദർശിപ്പിക്കാൻ കഴിയും - ഹൃദയങ്ങളും ഒരു ബയോഹാസാർഡ് അടയാളവും പോലും.

ബയോഹാസാർഡ് (വീതി: 0; ഉയരം: 0; ബോർഡർ: 60px സോളിഡ്; ബോർഡർ-റേഡിയസ്: 50%; അതിർത്തി-മുകളിൽ-നിറം: കറുപ്പ്; അതിർത്തി-താഴെ-നിറം: കറുപ്പ്; അതിർത്തി-ഇടത്-നിറം: മഞ്ഞ; അതിർത്തി-വലത്- നിറം: മഞ്ഞ;)

ഉപസംഹാരം

മുമ്പത്തെ പാഠത്തിൽ, ഒരു ഘടകത്തിന് ഒരു ബോർഡർ എങ്ങനെ സജ്ജീകരിക്കാമെന്ന് ഞങ്ങൾ പഠിച്ചു. ബോർഡറിന്റെ നിറവും ശൈലിയും നിങ്ങൾക്ക് ഇഷ്ടാനുസൃതമാക്കാൻ കഴിയുന്ന ബോർഡർ-കളർ, ബോർഡർ-സ്റ്റൈൽ തുടങ്ങിയ പ്രോപ്പർട്ടികളും ഞങ്ങൾ പരിശോധിച്ചു. എന്നിരുന്നാലും, ഞങ്ങളുടെ എല്ലാ ഫ്രെയിമുകളും വലത് കോണുകളോടെയാണ് പുറത്തുവന്നത്. ബോർഡറുകൾക്കായി CSS-ൽ വൃത്താകൃതിയിലുള്ള കോണുകൾ എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് ഞങ്ങൾ ഇപ്പോൾ കാണിച്ചുതരാം.

കോണുകൾ എങ്ങനെ റൗണ്ട് ചെയ്യാം: CSS3 ബോർഡർ-റേഡിയസ് പ്രോപ്പർട്ടി

ഒരു HTML പേജിലെ ഏത് ഘടകത്തിനും CSS-ൽ കോണുകൾ റൗണ്ടിംഗ് ചെയ്യാവുന്നതാണ്. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ ബോർഡർ-റേഡിയസ് പ്രോപ്പർട്ടി ഉചിതമായ മൂല്യത്തിൽ പ്രയോഗിക്കേണ്ടതുണ്ട്. മിക്കപ്പോഴും മൂല്യം പിക്സലുകളിൽ വ്യക്തമാക്കിയിട്ടുണ്ട്, എന്നാൽ em അല്ലെങ്കിൽ ശതമാനം പോലുള്ള മറ്റ് യൂണിറ്റുകളും ഉപയോഗിക്കാം (പിന്നീടുള്ള സന്ദർഭത്തിൽ, കണക്കുകൂട്ടൽ ബ്ലോക്കിന്റെ വീതിയുമായി ബന്ധപ്പെട്ടതാണ്).

ഫലം ഈ വസ്തുവിന്റെസ്റ്റൈൽ ചെയ്യുന്ന ഘടകത്തിന് നിറമുള്ള പശ്ചാത്തലവും കൂടാതെ/അല്ലെങ്കിൽ ബോർഡറും ഉണ്ടെങ്കിൽ മാത്രമേ അത് ശ്രദ്ധിക്കപ്പെടുകയുള്ളൂ. ഉദാഹരണത്തിന്:

BorderElement (പശ്ചാത്തല-നിറം: #EEDDFF; ബോർഡർ: 6px സോളിഡ് #7922CC; ബോർഡർ-റേഡിയസ്: 25px; )

മുകളിൽ വിവരിച്ച ശൈലി മൂലകത്തിൽ ഇനിപ്പറയുന്ന ഫലം നൽകും

വലിപ്പം 200x200 പിക്സലുകൾ:

മൂലകത്തിന്റെ മുകളിലോ താഴെയോ ഉള്ള കോണുകൾക്കായി മാത്രം നിങ്ങൾക്ക് വൃത്താകൃതിയിലുള്ള അരികുകൾ ഉണ്ടാക്കാം, അല്ലെങ്കിൽ ഓരോ കോണിനും വ്യത്യസ്‌ത റൗണ്ടിംഗ് റേഡിയസ് നൽകുക - ഭാവനയ്‌ക്ക് ധാരാളം ഇടം! ഉദാഹരണം:

BorderElement (പശ്ചാത്തല-നിറം: #EEDDFF; ബോർഡർ: 6px സോളിഡ് #7922CC; ബോർഡർ-റേഡിയസ്: 25px; ) .borderElement1 (പശ്ചാത്തല-നിറം: #FFE8DB; ബോർഡർ: 6px സോളിഡ് #FF5A00; ബോർഡർ-റേഡിയസ്: 10pxpx10)

എന്നാൽ എല്ലാം അല്ല: ലളിതമായ വൃത്താകൃതിയിലുള്ള കോണുകൾക്ക് പകരം, നിങ്ങൾക്ക് ഒരു ദീർഘവൃത്താകൃതിയിലുള്ള റൗണ്ടിംഗ് വ്യക്തമാക്കാൻ കഴിയും. ഇത് ചെയ്യുന്നതിന്, ഒരു സ്ലാഷ് കൊണ്ട് വേർതിരിച്ച രണ്ട് മൂല്യങ്ങൾ നിങ്ങൾ വ്യക്തമാക്കേണ്ടതുണ്ട് (ദീർഘവൃത്തത്തിന്റെ തിരശ്ചീനവും ലംബവുമായ അർദ്ധ അക്ഷങ്ങൾക്കായി). 150x450 പിക്സലുകളുടെ ഒരു ബ്ലോക്കിൽ നമുക്ക് ഒരു ഉദാഹരണം നൽകാം:

BorderElement (പശ്ചാത്തല നിറം: #EEDDFF; ബോർഡർ: 6px സോളിഡ് #7922CC; ബോർഡർ-റേഡിയസ്: 280px/100px; )

നിങ്ങൾക്ക് മൂല്യങ്ങൾ മിക്സ് ചെയ്യാൻ കഴിയും (അതായത്, ഒരേ ശൈലിയിൽ പതിവുള്ളതും ദീർഘവൃത്താകൃതിയിലുള്ളതുമായ വൃത്താകൃതിയിലുള്ളവ ഉപയോഗിക്കുക), കൂടാതെ ഉചിതമായ പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഓരോ കോണിലും ഒരു വ്യക്തിഗത ശൈലി ചേർക്കാനും കഴിയും:

• ബോർഡർ-മുകളിൽ-ഇടത്-റേഡിയസ് - മുകളിൽ ഇടത് മൂലയ്ക്ക്;
• ബോർഡർ-മുകളിൽ-വലത്-റേഡിയസ് - മുകളിൽ വലത് മൂലയ്ക്ക്;
• ബോർഡർ-ബോട്ടം-ഇടത്-റേഡിയസ് - താഴെ ഇടത് മൂലയ്ക്ക്;
• ബോർഡർ-താഴെ-വലത്-റേഡിയസ് - താഴെ വലത് മൂലയ്ക്ക്.

വൃത്താകൃതിയിലുള്ള കോണുകളുടെ തത്വം

CSS-ൽ കോർണർ റൗണ്ടിംഗ് എങ്ങനെയാണ് കണക്കാക്കുന്നതെന്ന് ചുവടെയുള്ള ചിത്രം കാണിക്കുന്നു. അതിനാൽ, കോണിനായി ഒരൊറ്റ മൂല്യം വ്യക്തമാക്കിയിട്ടുണ്ടെങ്കിൽ - ഉദാഹരണത്തിന്, 20px - ഇതിനർത്ഥം 20 പിക്സൽ ദൂരമുള്ള ഒരു സർക്കിളിനൊപ്പം റൗണ്ടിംഗ് സംഭവിക്കുമെന്നാണ്. രണ്ട് മൂല്യങ്ങൾ ഒരു സ്ലാഷ് കൊണ്ട് വേർതിരിച്ചിരിക്കുന്ന സാഹചര്യത്തിൽ, ഉദാഹരണത്തിന്, 30px/20px , കോണുകൾ ഒരു ദീർഘവൃത്തത്തിൽ വൃത്താകൃതിയിലായിരിക്കും. ഈ കേസിലെ ആദ്യ മൂല്യം ദീർഘവൃത്തത്തിന്റെ തിരശ്ചീന അക്ഷത്തിന്റെ നീളം - 30px, രണ്ടാമത്തെ മൂല്യം ലംബമായ അർദ്ധ-അക്ഷത്തിന്റെ നീളം - 20px:

CSS ബോർഡർ-റേഡിയസ് പ്രോപ്പർട്ടി എല്ലാവരും പിന്തുണയ്ക്കുന്നു ആധുനിക പതിപ്പുകൾബ്രൗസറുകൾ.

ബോർഡർ-റേഡിയസ് പ്രോപ്പർട്ടി, പങ്കിട്ടതോ പ്രത്യേകമായതോ ആയ ബോർഡറുകളുള്ളപ്പോൾ പട്ടിക ഘടകങ്ങൾക്ക് ബാധകമല്ല."> ബോർഡർ തകർച്ചയാണ് .

കുറിപ്പ്:ഏതൊരു ഷോർട്ട്‌ഹാൻഡ് പ്രോപ്പർട്ടിയും പോലെ, ബോർഡർ-റേഡിയസ്:0 0 ഇൻഹെറിറ്റ് ഇൻഹെറിറ്റ് പോലെയുള്ള വ്യക്തിഗത ഉപ-സ്വത്തുക്കൾക്ക് അവകാശപ്പെടാൻ കഴിയില്ല, ഇത് നിലവിലുള്ള നിർവചനങ്ങളെ ഭാഗികമായി മറികടക്കും. പകരം, വ്യക്തിഗത ലോംഗ്ഹാൻഡ് പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കേണ്ടതുണ്ട്.

വാക്യഘടന

/* ആദ്യത്തെ ആരത്തിന്റെ വാക്യഘടന ഒന്ന് മുതൽ നാല് വരെ മൂല്യങ്ങൾ അനുവദിക്കുന്നു *//* എല്ലാ 4 വശങ്ങൾക്കും ആരം സജ്ജീകരിച്ചിരിക്കുന്നു */ ബോർഡർ-റേഡിയസ്: 10px; /* മുകളിൽ-ഇടത്-താഴെ-വലത് | മുകളിൽ-വലത്-താഴെ-ഇടത്*/ ബോർഡർ-റേഡിയസ്: 10px 5%; /* മുകളിൽ-ഇടത് | മുകളിൽ-വലത്-താഴെ-ഇടത് | താഴെ-വലത്*/ ബോർഡർ-റേഡിയസ്: 2px 4px 2px; /* മുകളിൽ-ഇടത് | മുകളിൽ-വലത് | താഴെ-വലത് | താഴെ ഇടതുഭാഗത്ത്*/ ബോർഡർ-റേഡിയസ്: 1px 0 3px 4px; /* രണ്ടാമത്തെ ആരത്തിന്റെ വാക്യഘടന ഒന്ന് മുതൽ നാല് വരെ മൂല്യങ്ങൾ അനുവദിക്കുന്നു*/ /* (ആദ്യ റേഡിയസ് മൂല്യങ്ങൾ) / ആരം*/ ബോർഡർ-റേഡിയസ്: 10px 5% / 20px; /* (ആദ്യ റേഡിയസ് മൂല്യങ്ങൾ) / മുകളിൽ-ഇടത്-താഴെ-വലത് | മുകളിൽ-വലത്-താഴെ-ഇടത്*/ ബോർഡർ-റേഡിയസ്: 10px 5% / 20px 30px; /* (ആദ്യ റേഡിയസ് മൂല്യങ്ങൾ) / മുകളിൽ-ഇടത് | മുകളിൽ-വലത്-താഴെ-ഇടത് | താഴെ-വലത്*/ ബോർഡർ-റേഡിയസ്: 10px 5px 2em / 20px 25px 30%; /* (ആദ്യ റേഡിയസ് മൂല്യങ്ങൾ) / മുകളിൽ-ഇടത് | മുകളിൽ-വലത് | താഴെ-വലത് | താഴെ ഇടതുഭാഗത്ത്*/ ബോർഡർ-റേഡിയസ്: 10px 5% / 20px 25em 30px 35em; /* ആഗോള മൂല്യങ്ങൾ */ ബോർഡർ-റേഡിയസ്: അനന്തരാവകാശം; ബോർഡർ-റേഡിയസ്: പ്രാരംഭം; ബോർഡർ-റേഡിയസ്: സജ്ജീകരിക്കാത്തത്;

ബോർഡർ-റേഡിയസ് പ്രോപ്പർട്ടി ഇപ്രകാരം വ്യക്തമാക്കിയിരിക്കുന്നു:

• ഒന്ന്, രണ്ട്, മൂന്ന് അല്ലെങ്കിൽ നാല് CSS ഡാറ്റ തരം ഒരു ദൂര മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. വീതി, ഉയരം, മാർജിൻ, പാഡിംഗ്, ബോർഡർ-വിഡ്ത്ത്, ഫോണ്ട്-സൈസ്, ടെക്സ്റ്റ് ഷാഡോ എന്നിങ്ങനെ നിരവധി CSS പ്രോപ്പർട്ടികളിൽ ദൈർഘ്യം ഉപയോഗിക്കാം."> അല്ലെങ്കിൽ CSS ഡാറ്റ തരം ഒരു ശതമാനം മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. ഒരു മൂലകത്തിന്റെ പാരന്റ് ഒബ്‌ജക്‌റ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു വലുപ്പം നിർവചിക്കാൻ ഇത് പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്. വീതി ഉയരം മാർജിൻ പാഡിംഗ്, ഫോണ്ട്-സൈസ് എന്നിവ പോലുള്ള നിരവധി പ്രോപ്പർട്ടികൾ ശതമാനങ്ങൾ ഉപയോഗിക്കാം.> മൂല്യങ്ങൾ. കോണുകൾക്കായി ഒരൊറ്റ ആരം സജ്ജമാക്കാൻ ഇത് ഉപയോഗിക്കുന്നു.
• ഓപ്‌ഷണലായി "/", ഒന്ന്, രണ്ട്, മൂന്ന്, അല്ലെങ്കിൽ നാല് എന്നിവ പിന്തുടരുന്നു അഥവാ മൂല്യങ്ങൾ. ഒരു അധിക ആരം സജ്ജമാക്കാൻ ഇത് ഉപയോഗിക്കുന്നു, അതിനാൽ നിങ്ങൾക്ക് ദീർഘവൃത്താകൃതിയിലുള്ള കോണുകൾ ഉണ്ടാകാം.

മൂല്യങ്ങൾ

ആരം		ഒരു CSS ഡാറ്റ തരം ഒരു ദൂര മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. വീതി, ഉയരം, മാർജിൻ, പാഡിംഗ്, ബോർഡർ-വിഡ്ത്ത്, ഫോണ്ട്-സൈസ്, ടെക്സ്റ്റ് ഷാഡോ എന്നിങ്ങനെ നിരവധി CSS പ്രോപ്പർട്ടികളിൽ ദൈർഘ്യം ഉപയോഗിക്കാം."> അല്ലെങ്കിൽ ഒരു CSS ഡാറ്റ തരം ഒരു ശതമാനം മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. ഒരു മൂലകത്തിന്റെ പാരന്റ് ഒബ്‌ജക്‌റ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു വലുപ്പം നിർവചിക്കാൻ ഇത് പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്. വീതി ഉയരം മാർജിൻ പാഡിംഗ്, ഫോണ്ട്-സൈസ് എന്നിവ പോലുള്ള നിരവധി പ്രോപ്പർട്ടികൾ ശതമാനം ഉപയോഗിക്കാനാകും.> അതിർത്തിയുടെ ഓരോ കോണിലും ബോർഡർ ഉപയോഗിക്കാനുള്ള ആരം സൂചിപ്പിക്കുന്നു. ഒരു മൂല്യമുള്ള വാക്യഘടനയിൽ മാത്രമാണ് ഇത് ഉപയോഗിക്കുന്നത്.
മുകളിൽ-ഇടത്-താഴെ-വലത്		ഒരു CSS ഡാറ്റ തരം ഒരു ദൂര മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. വീതി, ഉയരം, മാർജിൻ, പാഡിംഗ്, ബോർഡർ-വിഡ്ത്ത്, ഫോണ്ട്-സൈസ്, ടെക്സ്റ്റ് ഷാഡോ എന്നിങ്ങനെ നിരവധി CSS പ്രോപ്പർട്ടികളിൽ ദൈർഘ്യം ഉപയോഗിക്കാം."> അല്ലെങ്കിൽ ഒരു CSS ഡാറ്റ തരം ഒരു ശതമാനം മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. ഒരു മൂലകത്തിന്റെ പാരന്റ് ഒബ്‌ജക്‌റ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു വലുപ്പം നിർവചിക്കാൻ ഇത് പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്. വീതി ഉയരം മാർജിൻ പാഡിംഗ്, ഫോണ്ട്-സൈസ് എന്നിവ പോലുള്ള നിരവധി പ്രോപ്പർട്ടികൾ ശതമാനം ഉപയോഗിക്കാനാകും.> മൂലകത്തിന്റെ ബോക്‌സിന്റെ മുകളിൽ-ഇടത്, താഴെ-വലത് കോണുകളിൽ ബോർഡർ ഉപയോഗിക്കുന്നതിനുള്ള ഒരു ആരം സൂചിപ്പിക്കുന്നു. ഇത് രണ്ട് മൂല്യമുള്ള വാക്യഘടനയിൽ മാത്രമാണ് ഉപയോഗിക്കുന്നത്.
മുകളിൽ-വലത്-താഴെ-ഇടത്		ഒരു CSS ഡാറ്റ തരം ഒരു ദൂര മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. വീതി, ഉയരം, മാർജിൻ, പാഡിംഗ്, ബോർഡർ-വിഡ്ത്ത്, ഫോണ്ട്-സൈസ്, ടെക്സ്റ്റ് ഷാഡോ എന്നിങ്ങനെ നിരവധി CSS പ്രോപ്പർട്ടികളിൽ ദൈർഘ്യം ഉപയോഗിക്കാം."> അല്ലെങ്കിൽ ഒരു CSS ഡാറ്റ തരം ഒരു ശതമാനം മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. ഒരു മൂലകത്തിന്റെ പാരന്റ് ഒബ്‌ജക്‌റ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു വലുപ്പം നിർവചിക്കാൻ ഇത് പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്. വീതി ഉയരം മാർജിൻ പാഡിംഗ്, ഫോണ്ട്-സൈസ് എന്നിവ പോലുള്ള നിരവധി പ്രോപ്പർട്ടികൾ ശതമാനം ഉപയോഗിക്കാനാകും.> മൂലകത്തിന്റെ ബോക്‌സിന്റെ മുകളിൽ-വലത്, താഴെ-ഇടത് കോണുകളിൽ ബോർഡർ ഉപയോഗിക്കുന്നതിനുള്ള ഒരു ആരം സൂചിപ്പിക്കുന്നു. ഇത് രണ്ട്, മൂന്ന് മൂല്യമുള്ള വാക്യഘടനകളിൽ മാത്രമാണ് ഉപയോഗിക്കുന്നത്.
മുകളിൽ-ഇടത്		ഒരു CSS ഡാറ്റ തരം ഒരു ദൂര മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. വീതി, ഉയരം, മാർജിൻ, പാഡിംഗ്, ബോർഡർ-വിഡ്ത്ത്, ഫോണ്ട്-സൈസ്, ടെക്സ്റ്റ് ഷാഡോ എന്നിങ്ങനെ നിരവധി CSS പ്രോപ്പർട്ടികളിൽ ദൈർഘ്യം ഉപയോഗിക്കാം."> അല്ലെങ്കിൽ ഒരു CSS ഡാറ്റ തരം ഒരു ശതമാനം മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. ഒരു മൂലകത്തിന്റെ പാരന്റ് ഒബ്‌ജക്‌റ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു വലുപ്പം നിർവചിക്കാൻ ഇത് പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്. വീതി ഉയരം മാർജിൻ പാഡിംഗ്, ഫോണ്ട്-സൈസ് എന്നിവ പോലുള്ള നിരവധി പ്രോപ്പർട്ടികൾ ശതമാനം ഉപയോഗിക്കാനാകും.> മൂലകത്തിന്റെ ബോക്‌സിന്റെ മുകളിൽ ഇടത് കോണിലുള്ള ബോർഡറിനായി ഉപയോഗിക്കാനുള്ള ആരം സൂചിപ്പിക്കുന്നു. ഇത് മൂന്ന്, നാല് മൂല്യമുള്ള വാക്യഘടനകളിൽ മാത്രമാണ് ഉപയോഗിക്കുന്നത്.
മുകളിൽ-വലത്		ഒരു CSS ഡാറ്റ തരം ഒരു ദൂര മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. വീതി, ഉയരം, മാർജിൻ, പാഡിംഗ്, ബോർഡർ-വിഡ്ത്ത്, ഫോണ്ട്-സൈസ്, ടെക്സ്റ്റ് ഷാഡോ എന്നിങ്ങനെ നിരവധി CSS പ്രോപ്പർട്ടികളിൽ ദൈർഘ്യം ഉപയോഗിക്കാം."> അല്ലെങ്കിൽ ഒരു CSS ഡാറ്റ തരം ഒരു ശതമാനം മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. ഒരു മൂലകത്തിന്റെ പാരന്റ് ഒബ്‌ജക്‌റ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു വലുപ്പം നിർവചിക്കാൻ ഇത് പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്. വീതി ഉയരം മാർജിൻ പാഡിംഗ്, ഫോണ്ട്-സൈസ് എന്നിവ പോലുള്ള നിരവധി പ്രോപ്പർട്ടികൾ ശതമാനം ഉപയോഗിക്കാനാകും.> മൂലകത്തിന്റെ ബോക്‌സിന്റെ മുകളിൽ വലത് കോണിലുള്ള ബോർഡറിന് ഉപയോഗിക്കാനുള്ള ആരം സൂചിപ്പിക്കുന്നു. ഇത് നാല് മൂല്യ വാക്യഘടനയിൽ മാത്രമാണ് ഉപയോഗിക്കുന്നത്.
താഴെ-വലത്		ഒരു CSS ഡാറ്റ തരം ഒരു ദൂര മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. വീതി, ഉയരം, മാർജിൻ, പാഡിംഗ്, ബോർഡർ-വിഡ്ത്ത്, ഫോണ്ട്-സൈസ്, ടെക്സ്റ്റ് ഷാഡോ എന്നിങ്ങനെ നിരവധി CSS പ്രോപ്പർട്ടികളിൽ ദൈർഘ്യം ഉപയോഗിക്കാം."> അല്ലെങ്കിൽ ഒരു CSS ഡാറ്റ തരം ഒരു ശതമാനം മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. ഒരു മൂലകത്തിന്റെ പാരന്റ് ഒബ്‌ജക്‌റ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു വലുപ്പം നിർവചിക്കാൻ ഇത് പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്. വീതി ഉയരം മാർജിൻ പാഡിംഗ്, ഫോണ്ട്-സൈസ് എന്നിവ പോലുള്ള നിരവധി പ്രോപ്പർട്ടികൾ ശതമാനം ഉപയോഗിക്കാനാകും.> മൂലകത്തിന്റെ ബോക്‌സിന്റെ താഴെ-വലത് കോണിലുള്ള ബോർഡറിനായി ഉപയോഗിക്കാനുള്ള ആരം സൂചിപ്പിക്കുന്നു. ഇത് മൂന്ന്, നാല് മൂല്യമുള്ള വാക്യഘടനകളിൽ മാത്രമാണ് ഉപയോഗിക്കുന്നത്.
താഴെ ഇടതുഭാഗത്ത്		ഒരു CSS ഡാറ്റ തരം ഒരു ദൂര മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. വീതി, ഉയരം, മാർജിൻ, പാഡിംഗ്, ബോർഡർ-വിഡ്ത്ത്, ഫോണ്ട്-സൈസ്, ടെക്സ്റ്റ് ഷാഡോ എന്നിങ്ങനെ നിരവധി CSS പ്രോപ്പർട്ടികളിൽ ദൈർഘ്യം ഉപയോഗിക്കാം."> അല്ലെങ്കിൽ ഒരു CSS ഡാറ്റ തരം ഒരു ശതമാനം മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. ഒരു മൂലകത്തിന്റെ പാരന്റ് ഒബ്‌ജക്‌റ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു വലുപ്പം നിർവചിക്കാൻ ഇത് പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്. വീതി ഉയരം മാർജിൻ പാഡിംഗ്, ഫോണ്ട്-സൈസ് എന്നിവ പോലുള്ള നിരവധി പ്രോപ്പർട്ടികൾ ശതമാനം ഉപയോഗിക്കാനാകും.> മൂലകത്തിന്റെ ബോക്‌സിന്റെ താഴെ-ഇടത് കോണിലുള്ള ബോർഡറിനായി ഉപയോഗിക്കാനുള്ള ആരം സൂചിപ്പിക്കുന്നു. ഇത് നാല് മൂല്യ വാക്യഘടനയിൽ മാത്രമാണ് ഉപയോഗിക്കുന്നത്.

CSS ഡാറ്റ തരം ഒരു ദൂര മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. വീതി, ഉയരം, മാർജിൻ, പാഡിംഗ്, ബോർഡർ-വിഡ്ത്ത്, ഫോണ്ട്-സൈസ്, ടെക്സ്റ്റ് ഷാഡോ എന്നിങ്ങനെ നിരവധി CSS പ്രോപ്പർട്ടികളിൽ ദൈർഘ്യം ഉപയോഗിക്കാം."> നീളം മൂല്യങ്ങൾ ഉപയോഗിച്ച് വൃത്തത്തിന്റെ ആരത്തിന്റെ വലിപ്പം, അല്ലെങ്കിൽ ദീർഘവൃത്തത്തിന്റെ അർദ്ധ-മേജർ, സെമി-മൈനർ അക്ഷങ്ങൾ എന്നിവയെ സൂചിപ്പിക്കുന്നു. നെഗറ്റീവ് മൂല്യങ്ങൾ അസാധുവാണ്. CSS ഡാറ്റ തരം ഒരു ശതമാനം മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. ഒരു മൂലകത്തിന്റെ പാരന്റ് ഒബ്‌ജക്‌റ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു വലുപ്പം നിർവചിക്കാൻ ഇത് പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്. വീതി ഉയരം മാർജിൻ പാഡിംഗ്, ഫോണ്ട്-സൈസ് എന്നിവ പോലുള്ള നിരവധി പ്രോപ്പർട്ടികൾ ശതമാനം ഉപയോഗിക്കാനാകും.> ശതമാനം മൂല്യങ്ങൾ ഉപയോഗിച്ച് സർക്കിൾ ആരത്തിന്റെ വലുപ്പത്തെ അല്ലെങ്കിൽ ദീർഘവൃത്തത്തിന്റെ അർദ്ധ-മേജർ, സെമി-മൈനർ അക്ഷങ്ങളെ സൂചിപ്പിക്കുന്നു. തിരശ്ചീന അക്ഷത്തിനുള്ള ശതമാനം ബോക്‌സിന്റെ വീതിയെ സൂചിപ്പിക്കുന്നു; ലംബ അക്ഷത്തിന്റെ ശതമാനം ബോക്‌സിന്റെ ഉയരത്തെ സൂചിപ്പിക്കുന്നു. നെഗറ്റീവ് മൂല്യങ്ങൾ അസാധുവാണ്.

ബോർഡർ-റേഡിയസ്: 1എം/5എം; /* ... ഇതിന് തുല്യമാണ്: */ border-top-left-radius: 1em 5em; ബോർഡർ-മുകളിൽ-വലത്-റേഡിയസ്: 1എം 5എം; ബോർഡർ-താഴെ-വലത്-റേഡിയസ്: 1എം 5എം; ബോർഡർ-ബോട്ടം-ഇടത്-റേഡിയസ്: 1എം 5എം; ബോർഡർ-റേഡിയസ്: 4px 3px 6px / 2px 4px; /* ... ഇതിന് തുല്യമാണ്: */ border-top-left-radius: 4px 2px; ബോർഡർ-മുകളിൽ-വലത്-റേഡിയസ്: 3px 4px; ബോർഡർ-താഴെ-വലത്-റേഡിയസ്: 6px 2px; ബോർഡർ-ബോട്ടം-ഇടത്-റേഡിയസ്: 3px 4px;

ഔപചാരിക വാക്യഘടന

1,4 / 1,4

എവിടെ
= !}

ഉദാഹരണങ്ങൾ

ബോർഡർ: സോളിഡ് 10px; /* ബോർഡർ ഒരു "D" */ ബോർഡർ-റേഡിയസിലേക്ക് വളയും: 10px 40px 40px 10px; ബോർഡർ: ഗ്രോവ് 1എം ചുവപ്പ്; ബോർഡർ-റേഡിയസ്: 2എം; പശ്ചാത്തലം:സ്വർണം; അതിർത്തി: റിഡ്ജ് ഗോൾഡ്; ബോർഡർ-റേഡിയസ്: 13എം/3എം; അതിർത്തി: ഒന്നുമില്ല; ബോർഡർ-റേഡിയസ്: 40px 10px; അതിർത്തി: ഒന്നുമില്ല; ബോർഡർ-റേഡിയസ്: 50%; അതിർത്തി: കുത്തുകളുള്ള; ബോർഡർ വീതി: 10px 4px; ബോർഡർ-റേഡിയസ്: 10px 40px; ബോർഡർ: ഡാഷ്ഡ്; ബോർഡർ വീതി: 2px 4px; ബോർഡർ-റേഡിയസ്: 40px;

തത്സമയ സാമ്പിളുകൾ

സ്പെസിഫിക്കേഷനുകൾ

സ്പെസിഫിക്കേഷൻ	പദവി	അഭിപ്രായം
CSS പശ്ചാത്തലങ്ങളും അതിർത്തികളും മൊഡ്യൂൾ ലെവൽ 3 ആ സ്പെസിഫിക്കേഷനിൽ "ബോർഡർ-റേഡിയസ്" എന്നതിന്റെ നിർവചനം.	സ്ഥാനാർത്ഥി ശുപാർശ	പ്രാരംഭ നിർവ്വചനം

പ്രാരംഭ മൂല്യം
ബാധകമാണ്	എല്ലാ ഘടകങ്ങളും; എന്നാൽ ഉപയോക്തൃ ഏജന്റുകൾ അല്ലപങ്കിട്ടതോ പ്രത്യേകമായതോ ആയ ബോർഡറുകളുള്ളപ്പോൾ പട്ടികയിലും ഇൻലൈൻ-ടേബിൾ ഘടകങ്ങളിലും പ്രയോഗിക്കേണ്ടതുണ്ട്."> ബോർഡർ-തകർച്ച തകർച്ചയാണ്. ആന്തരിക ടേബിൾ ഘടകങ്ങളിലെ പെരുമാറ്റം തൽക്കാലം നിർവചിച്ചിട്ടില്ല.. ഇത് :: ആദ്യ അക്ഷരത്തിനും ബാധകമാണ്.
പാരമ്പര്യമായി	ഇല്ല
ശതമാനം	ബോർഡർ ബോക്‌സിന്റെ അനുബന്ധ അളവ് റഫർ ചെയ്യുക
മാധ്യമങ്ങൾ	വിഷ്വൽ
കണക്കാക്കിയ മൂല്യം	ഷോർട്ട്‌ഹാൻഡിന്റെ ഓരോ ഗുണങ്ങളും പോലെ: border-bottom-left-radius : രണ്ട് സമ്പൂർണ്ണ CSS ഡാറ്റ തരം ഒരു ദൂര മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. വീതി, ഉയരം, മാർജിൻ, പാഡിംഗ്, ബോർഡർ-വിഡ്ത്ത്, ഫോണ്ട്-സൈസ്, ടെക്സ്റ്റ് ഷാഡോ എന്നിങ്ങനെ നിരവധി CSS പ്രോപ്പർട്ടികളിൽ ദൈർഘ്യം ഉപയോഗിക്കാം."> s അല്ലെങ്കിൽ CSS ഡാറ്റ തരം ഒരു ശതമാനം മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. ഒരു മൂലകത്തിന്റെ പാരന്റ് ഒബ്‌ജക്‌റ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു വലുപ്പം നിർവചിക്കാൻ ഇത് പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്. വീതി ഉയരം മാർജിൻ പാഡിംഗ്, ഫോണ്ട്-സൈസ് എന്നിവ പോലുള്ള നിരവധി പ്രോപ്പർട്ടികൾ ശതമാനങ്ങൾ ഉപയോഗിക്കാം.> എസ് border-bottom-right-radius : രണ്ട് സമ്പൂർണ്ണ CSS ഡാറ്റ തരം ഒരു ദൂര മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. വീതി, ഉയരം, മാർജിൻ, പാഡിംഗ്, ബോർഡർ-വിഡ്ത്ത്, ഫോണ്ട്-സൈസ്, ടെക്സ്റ്റ് ഷാഡോ എന്നിങ്ങനെ നിരവധി CSS പ്രോപ്പർട്ടികളിൽ ദൈർഘ്യം ഉപയോഗിക്കാം."> s അല്ലെങ്കിൽ CSS ഡാറ്റ തരം ഒരു ശതമാനം മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. ഒരു മൂലകത്തിന്റെ പാരന്റ് ഒബ്‌ജക്‌റ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു വലുപ്പം നിർവചിക്കാൻ ഇത് പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്. വീതി ഉയരം മാർജിൻ പാഡിംഗ്, ഫോണ്ട്-സൈസ് എന്നിവ പോലുള്ള നിരവധി പ്രോപ്പർട്ടികൾ ശതമാനങ്ങൾ ഉപയോഗിക്കാം.> എസ് border-top-left-radius : രണ്ട് സമ്പൂർണ്ണ CSS ഡാറ്റ തരം ഒരു ദൂര മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. വീതി, ഉയരം, മാർജിൻ, പാഡിംഗ്, ബോർഡർ-വിഡ്ത്ത്, ഫോണ്ട്-സൈസ്, ടെക്സ്റ്റ് ഷാഡോ എന്നിങ്ങനെ നിരവധി CSS പ്രോപ്പർട്ടികളിൽ ദൈർഘ്യം ഉപയോഗിക്കാം."> s അല്ലെങ്കിൽ CSS ഡാറ്റ തരം ഒരു ശതമാനം മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. ഒരു മൂലകത്തിന്റെ പാരന്റ് ഒബ്‌ജക്‌റ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു വലുപ്പം നിർവചിക്കാൻ ഇത് പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്. വീതി ഉയരം മാർജിൻ പാഡിംഗ്, ഫോണ്ട്-സൈസ് എന്നിവ പോലുള്ള നിരവധി പ്രോപ്പർട്ടികൾ ശതമാനങ്ങൾ ഉപയോഗിക്കാം.> എസ് border-top-right-radius : രണ്ട് സമ്പൂർണ്ണ CSS ഡാറ്റ തരം ഒരു ദൂര മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. വീതി, ഉയരം, മാർജിൻ, പാഡിംഗ്, ബോർഡർ-വിഡ്ത്ത്, ഫോണ്ട്-സൈസ്, ടെക്സ്റ്റ് ഷാഡോ എന്നിങ്ങനെ നിരവധി CSS പ്രോപ്പർട്ടികളിൽ ദൈർഘ്യം ഉപയോഗിക്കാം."> s അല്ലെങ്കിൽ CSS ഡാറ്റ തരം ഒരു ശതമാനം മൂല്യത്തെ പ്രതിനിധീകരിക്കുന്നു. ഒരു മൂലകത്തിന്റെ പാരന്റ് ഒബ്‌ജക്‌റ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു വലുപ്പം നിർവചിക്കാൻ ഇത് പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്. വീതി ഉയരം മാർജിൻ പാഡിംഗ്, ഫോണ്ട്-സൈസ് എന്നിവ പോലുള്ള നിരവധി പ്രോപ്പർട്ടികൾ ശതമാനങ്ങൾ ഉപയോഗിക്കാം.> എസ്
ആനിമേഷൻ തരം	ഷോർട്ട്‌ഹാൻഡിന്റെ ഓരോ ഗുണങ്ങളും പോലെ: border-top-left-radius : ഒരു CSS ഡാറ്റ തരം യഥാർത്ഥ, ഫ്ലോട്ടിംഗ് പോയിന്റ് നമ്പറുകളായി ഇന്റർപോളേറ്റ് ചെയ്യപ്പെടുന്നു.">ദൈർഘ്യം , CSS ഡാറ്റ തരം യഥാർത്ഥ, ഫ്ലോട്ടിംഗ് പോയിന്റ് നമ്പറുകളായി ഇന്റർപോളേറ്റ് ചെയ്യപ്പെടുന്നു.">ശതമാനം അല്ലെങ്കിൽ കണക്കുകൂട്ടൽ(); border-top-right-radius : ഒരു CSS ഡാറ്റ തരം യഥാർത്ഥ, ഫ്ലോട്ടിംഗ്-പോയിന്റ് നമ്പറുകളായി ഇന്റർപോളേറ്റ് ചെയ്യപ്പെടുന്നു.">ദൈർഘ്യം , CSS ഡാറ്റ തരം യഥാർത്ഥ, ഫ്ലോട്ടിംഗ് പോയിന്റ് നമ്പറുകളായി ഇന്റർപോളേറ്റ് ചെയ്യുന്നു.">ശതമാനം അല്ലെങ്കിൽ കണക്കുകൂട്ടൽ(); border-bottom-right-radius : ഒരു CSS ഡാറ്റ തരം യഥാർത്ഥ, ഫ്ലോട്ടിംഗ്-പോയിന്റ് നമ്പറുകളായി ഇന്റർപോളേറ്റ് ചെയ്യപ്പെടുന്നു.">ദൈർഘ്യം , CSS ഡാറ്റ തരം യഥാർത്ഥ, ഫ്ലോട്ടിംഗ്-പോയിന്റ് നമ്പറുകളായി ഇന്റർപോളേറ്റ് ചെയ്യപ്പെടുന്നു.">ശതമാനം അല്ലെങ്കിൽ കണക്കുകൂട്ടൽ(); border-bottom-left-radius : ഒരു CSS ഡാറ്റ തരം യഥാർത്ഥ, ഫ്ലോട്ടിംഗ്-പോയിന്റ് നമ്പറുകളായി ഇന്റർപോളേറ്റ് ചെയ്യുന്നു.">ദൈർഘ്യം , CSS ഡാറ്റ തരം യഥാർത്ഥ, ഫ്ലോട്ടിംഗ്-പോയിന്റ് നമ്പറുകളായി ഇന്റർപോളേറ്റ് ചെയ്യുന്നു.">ശതമാനം അല്ലെങ്കിൽ കണക്കുകൂട്ടൽ();
കാനോനിക്കൽ ഓർഡർ	ഔപചാരിക വ്യാകരണം നിർവചിച്ചിരിക്കുന്ന അവ്യക്തമായ ക്രമം

ബ്രൗസർ അനുയോജ്യത

ഘടനാപരമായ ഡാറ്റയിൽ നിന്നാണ് ഈ പേജിലെ അനുയോജ്യതാ പട്ടിക സൃഷ്ടിച്ചിരിക്കുന്നത്. നിങ്ങൾ ഡാറ്റയിലേക്ക് സംഭാവന ചെയ്യാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ദയവായി https://github.com/mdn/browser-compat-data പരിശോധിച്ച് ഞങ്ങൾക്ക് ഒരു പുൾ അഭ്യർത്ഥന അയയ്ക്കുക.

GitHub-ലെ അനുയോജ്യത ഡാറ്റ അപ്‌ഡേറ്റ് ചെയ്യുക

	ഡെസ്ക്ടോപ്പ്						മൊബൈൽ
	ക്രോം	എഡ്ജ്	ഫയർഫോക്സ്	ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ	ഓപ്പറ	സഫാരി	ആൻഡ്രോയിഡ് വെബ്‌വ്യൂ	Android-നുള്ള Chrome	എഡ്ജ് മൊബൈൽ	ആൻഡ്രോയിഡിനുള്ള ഫയർഫോക്സ്	ആൻഡ്രോയിഡിനുള്ള ഓപ്പറ	iOS-ൽ സഫാരി	സാംസങ് ഇന്റർനെറ്റ്
അടിസ്ഥാന പിന്തുണ	Chrome പൂർണ്ണ പിന്തുണ 4 കുറിപ്പുകൾ പൂർണ്ണ പിന്തുണ 4 കുറിപ്പുകൾ കുറിപ്പുകൾ -webkit-appearance ഉചിതമായ മൂല്യത്തിലേക്ക് അസാധുവാക്കപ്പെടാത്ത പക്ഷം ഘടകങ്ങൾ. പൂർണ്ണ പിന്തുണ 1 പ്രിഫിക്സഡ് പ്രിഫിക്സഡ്	എഡ്ജ് പൂർണ്ണ പിന്തുണ 12 പൂർണ്ണ പിന്തുണ 12 പൂർണ്ണ പിന്തുണ 12 പ്രിഫിക്സഡ് പ്രിഫിക്സഡ് വെണ്ടർ പ്രിഫിക്‌സ് ഉപയോഗിച്ച് നടപ്പിലാക്കിയത്: -webkit-	ഫയർഫോക്സ് പൂർണ്ണ പിന്തുണ 4 കുറിപ്പുകൾ പൂർണ്ണ പിന്തുണ 4 കുറിപ്പുകൾ കുറിപ്പുകൾ ഫയർഫോക്സ് 50-ന് മുമ്പ്, വൃത്താകൃതിയിലുള്ള കോണുകളുടെ (ബോർഡർ-റേഡിയസ് ഉള്ള) ബോർഡർ ശൈലികൾ എല്ലായ്പ്പോഴും ബോർഡർ-സ്റ്റൈൽ സോളിഡ് പോലെയാണ് റെൻഡർ ചെയ്തിരുന്നത്. ഇതിനുണ്ട് Firefox 50-ൽ ഉറപ്പിച്ചു. കുറിപ്പുകൾ CSS3 സ്റ്റാൻഡേർഡിന് അനുസൃതമായി, സ്പെസിഫിക്കേഷനുമായി പൊരുത്തപ്പെടുന്നതിന് ഫയർഫോക്സ് 4 മൂല്യങ്ങളുടെ കൈകാര്യം ചെയ്യൽ മാറ്റുന്നു. നിങ്ങൾക്ക് കഴിയുംബോർഡർ-റേഡിയസ് ഉള്ള ഒരു അനിയന്ത്രിതമായ വലിപ്പമുള്ള മൂലകത്തിൽ ഒരു ബോർഡറായി ഒരു ദീർഘവൃത്തം വ്യക്തമാക്കുക: 50%; . ഫയർഫോക്സ് 4 വൃത്താകൃതിയിലുള്ള മൂലകൾ ക്ലിപ്പ് ഉള്ളടക്കവും ചിത്രങ്ങളും ഉണ്ടാക്കുന്നു എങ്കിൽ : ദൃശ്യം സജ്ജീകരിച്ചിട്ടില്ല. പിന്തുണയില്ല 1 - 12 പ്രിഫിക്സഡ് പ്രിഫിക്സഡ് വെണ്ടർ പ്രിഫിക്‌സ് ഉപയോഗിച്ച് നടപ്പിലാക്കിയത്: -moz-	IE പൂർണ്ണ പിന്തുണ 9	ഓപ്പറ പൂർണ്ണ പിന്തുണ 10.5 കുറിപ്പുകൾ പൂർണ്ണ പിന്തുണ 10.5 കുറിപ്പുകൾ കുറിപ്പുകൾ പതിപ്പ് 11.60-ന് മുമ്പുള്ള ഓപ്പറയിൽ, ബോർഡർ-റേഡിയസ് ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിച്ച ഘടകങ്ങൾക്ക് വൃത്താകൃതിയിലുള്ള കോണുകൾ ഉണ്ടാകില്ല.	സഫാരി പൂർണ്ണ പിന്തുണ 5 കുറിപ്പുകൾ പൂർണ്ണ പിന്തുണ 5 കുറിപ്പുകൾ കുറിപ്പുകൾ നിലവിലെ Chrome, Safari പതിപ്പുകൾ ബോർഡർ-റേഡിയസ് ഓൺ അവഗണിക്കുന്നു -webkit-appearance ഉചിതമായ മൂല്യത്തിലേക്ക് അസാധുവാക്കപ്പെടാത്ത പക്ഷം ഘടകങ്ങൾ. പൂർണ്ണ പിന്തുണ 3 പ്രിഫിക്സഡ് പ്രിഫിക്സഡ് വെണ്ടർ പ്രിഫിക്‌സ് ഉപയോഗിച്ച് നടപ്പിലാക്കിയത്: -webkit-	WebView ആൻഡ്രോയിഡ് പൂർണ്ണ പിന്തുണ 2 പ്രിഫിക്സഡ് പൂർണ്ണ പിന്തുണ 2 പ്രിഫിക്സഡ് പ്രിഫിക്സഡ് വെണ്ടർ പ്രിഫിക്‌സ് ഉപയോഗിച്ച് നടപ്പിലാക്കിയത്: -webkit-		എഡ്ജ് മൊബൈൽ പൂർണ്ണ പിന്തുണ അതെ പൂർണ്ണ പിന്തുണ അതെ പൂർണ്ണ പിന്തുണ അതെ പ്രിഫിക്സഡ് പ്രിഫിക്സഡ് വെണ്ടർ പ്രിഫിക്‌സ് ഉപയോഗിച്ച് നടപ്പിലാക്കിയത്: -webkit-	Firefox ആൻഡ്രോയിഡ് പൂർണ്ണ പിന്തുണ അതെ കുറിപ്പുകൾ പൂർണ്ണ പിന്തുണ അതെ കുറിപ്പുകൾ കുറിപ്പുകൾ ഫയർഫോക്സ് 50-ന് മുമ്പ്, വൃത്താകൃതിയിലുള്ള കോണുകളുടെ (ബോർഡർ-റേഡിയസ് ഉള്ള) ബോർഡർ ശൈലികൾ എല്ലായ്പ്പോഴും ബോർഡർ-സ്റ്റൈൽ സോളിഡ് പോലെയാണ് റെൻഡർ ചെയ്തിരുന്നത്. ഇത് ഫയർഫോക്സ് 50 ൽ പരിഹരിച്ചു.	ഓപ്പറ ആൻഡ്രോയിഡ് പൂർണ്ണ പിന്തുണ	Safari iOS പൂർണ്ണ പിന്തുണ അതെ
എലിപ്റ്റിക്കൽ ബോർഡറുകൾ	Chrome പൂർണ്ണ പിന്തുണ അതെ കുറിപ്പുകൾ പൂർണ്ണ പിന്തുണ അതെ കുറിപ്പുകൾ കുറിപ്പുകൾ Chrome 4-ന് മുമ്പ്, സ്ലാഷ് / നൊട്ടേഷൻ പിന്തുണയ്ക്കുന്നില്ല. രണ്ട് മൂല്യങ്ങൾ വ്യക്തമാക്കിയിട്ടുണ്ടെങ്കിൽ, നാല് കോണുകളിലും ഒരു ദീർഘവൃത്താകൃതിയിലുള്ള ബോർഡർ വരയ്ക്കുന്നു. -webkit-ബോർഡർ-റേഡിയസ്: 40px 10px; ബോർഡർ-റേഡിയസിന് തുല്യമാണ്: 40px/10px; .	എഡ്ജ് പൂർണ്ണ പിന്തുണ 12	ഫയർഫോക്സ് പൂർണ്ണ പിന്തുണ 3.5	IE പൂർണ്ണ പിന്തുണ അതെ	ഓപ്പറ പൂർണ്ണ പിന്തുണ അതെ	Safari പൂർണ്ണ പിന്തുണ അതെ കുറിപ്പുകൾ പൂർണ്ണ പിന്തുണ അതെ കുറിപ്പുകൾ കുറിപ്പുകൾ Safari 4.1-ന് മുമ്പ്, സ്ലാഷ് / നൊട്ടേഷൻ പിന്തുണയ്ക്കുന്നില്ല. രണ്ട് മൂല്യങ്ങൾ വ്യക്തമാക്കിയിട്ടുണ്ടെങ്കിൽ, നാല് കോണുകളിലും ഒരു ദീർഘവൃത്താകൃതിയിലുള്ള ബോർഡർ വരയ്ക്കുന്നു. -webkit-ബോർഡർ-റേഡിയസ്: 40px 10px; ബോർഡർ-റേഡിയസിന് തുല്യമാണ്: 40px/10px; .	WebView ആൻഡ്രോയിഡ്?	Chrome Android പൂർണ്ണ പിന്തുണ അതെ				Safari iOS?	സാംസങ് ഇന്റർനെറ്റ് ആൻഡ്രോയിഡ് പൂർണ്ണ പിന്തുണ അതെ
4 കോണുകൾക്കായി 4 മൂല്യങ്ങൾ	Chrome പൂർണ്ണ പിന്തുണ 4	എഡ്ജ് പൂർണ്ണ പിന്തുണ 12	Firefox പൂർണ്ണ പിന്തുണ അതെ	IE പൂർണ്ണ പിന്തുണ അതെ	ഓപ്പറ പൂർണ്ണ പിന്തുണ അതെ	സഫാരി പൂർണ്ണ പിന്തുണ 5	WebView ആൻഡ്രോയിഡ്?	Chrome Android പൂർണ്ണ പിന്തുണ അതെ	എഡ്ജ് മൊബൈൽ പൂർണ്ണ പിന്തുണ അതെ	Firefox ആൻഡ്രോയിഡ് പൂർണ്ണ പിന്തുണ അതെ	ഓപ്പറ ആൻഡ്രോയിഡ് പിന്തുണ ഇല്ല	Safari iOS?	സാംസങ് ഇന്റർനെറ്റ് ആൻഡ്രോയിഡ് പൂർണ്ണ പിന്തുണ അതെ
ശതമാനം	Chrome പൂർണ്ണ പിന്തുണ അതെ കുറിപ്പുകൾ പൂർണ്ണ പിന്തുണ അതെ കുറിപ്പുകൾ കുറിപ്പുകൾ പഴയ Chrome, Safari പതിപ്പുകളിൽ മൂല്യങ്ങൾ പിന്തുണയ്ക്കുന്നില്ല (ഇത് 2010 സെപ്റ്റംബറിൽ പരിഹരിച്ചു).	എഡ്ജ് പൂർണ്ണ പിന്തുണ 12	ഫയർഫോക്സ്

ഇതിഹാസം

പൂർണ്ണ പിന്തുണപൂർണ്ണ പിന്തുണ പിന്തുണയില്ലപിന്തുണയില്ല അനുയോജ്യത അജ്ഞാതമാണ്അനുയോജ്യത അജ്ഞാതം നടപ്പിലാക്കൽ കുറിപ്പുകൾ കാണുക. നടപ്പിലാക്കൽ കുറിപ്പുകൾ കാണുക. ഉപയോഗത്തിന് വെണ്ടർ പ്രിഫിക്സോ മറ്റൊരു പേരോ ആവശ്യമാണ്.

ഇതും കാണുക

• ബോർഡർ-റേഡിയസുമായി ബന്ധപ്പെട്ട CSS പ്രോപ്പർട്ടികൾ:

CSS പ്രോപ്പർട്ടികൾ

നിർവചനവും പ്രയോഗവും

ബോർഡർ-റേഡിയസ് CSS പ്രോപ്പർട്ടി ഒരു മൂലകത്തിന്റെ ബോർഡറുകളുടെ ആകൃതി നിർവ്വചിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഈ പ്രോപ്പർട്ടി ഇനിപ്പറയുന്ന നാല് പ്രോപ്പർട്ടികൾക്കുള്ള ചുരുക്കെഴുത്താണ്:

ഫില്ലറ്റ് ആരം മുഴുവൻ പശ്ചാത്തലത്തിലും പ്രയോഗിക്കുന്നു, അല്ലെങ്കിൽ പശ്ചാത്തല ചിത്രംപശ്ചാത്തല പ്രോപ്പർട്ടി വ്യക്തമാക്കുന്നു (ഘടകത്തിന് അതിരുകളില്ലെങ്കിലും). കൃത്യമായ സ്ഥാനംപശ്ചാത്തല-ക്ലിപ്പ് പ്രോപ്പർട്ടി മൂല്യം അനുസരിച്ചാണ് ക്ലിപ്പിംഗ് നിർണ്ണയിക്കുന്നത്.

1. കോണുകളുടെ റൗണ്ടിംഗ് ഇല്ല. സ്ഥിര മൂല്യം 0 (പൂജ്യം) ആണ്.
2. വൃത്താകൃതിയിലുള്ള കോണുകൾ ( ഒരു വൃത്തത്തിന്റെ ആർക്ക് തരം അനുസരിച്ച്). /-th മൂല്യം (ഒന്ന് മുതൽ നാല് വരെ) CSS യൂണിറ്റുകളിൽ (px, em, cm, മുതലായവ) വ്യക്തമാക്കുകയും നിർണ്ണയിക്കുകയും ചെയ്യുന്നു ആർറൗണ്ടിംഗിന്റെ ആദിയസ് (ആരം). ഓരോ റേഡിയസ്സിനുമുള്ള മൂല്യങ്ങൾ ഇനിപ്പറയുന്ന ക്രമത്തിൽ വ്യക്തമാക്കിയിരിക്കുന്നു: മുകളിൽ-ഇടത്(മുകളിൽ ഇടത് മൂല), മുകളിൽ-വലത്(മുകളിൽ വലത് കോണിൽ), താഴെ-വലത്(താഴെ വലത് മൂല), താഴെ ഇടതുഭാഗത്ത്(താഴെ ഇടതുഭാഗത്ത്). എങ്കിൽ താഴെ ഇടതുഭാഗത്ത്(ചുവടെ ഇടത്) ഒഴിവാക്കിയിരിക്കുന്നു, തുടർന്ന് അത് സമാനമാണ് മുകളിൽ-വലത്(മുകളിൽ വലത് കോണിൽ). എങ്കിൽ താഴെ-വലത്(താഴെ വലത് മൂല) ഒഴിവാക്കിയിരിക്കുന്നു, തുടർന്ന് അത് സമാനമാണ് മുകളിൽ-ഇടത്(മുകളിൽ ഇടത് മൂല). എങ്കിൽ മുകളിൽ-വലത്(മുകളിൽ വലത് കോണിൽ) ഒഴിവാക്കിയിരിക്കുന്നു, തുടർന്ന് അത് സമാനമാണ് മുകളിൽ-ഇടത്(മുകളിൽ ഇടത് മൂല). മൂല്യങ്ങളെ ശതമാനമായി സൂചിപ്പിക്കാൻ ഇത് അനുവദിച്ചിരിക്കുന്നു.
3. വൃത്താകൃതിയിലുള്ള കോണുകൾ ( ദീർഘവൃത്താകൃതിയിലുള്ള ആർക്ക് പോലെ). മൂല്യങ്ങൾ CSS യൂണിറ്റുകളിൽ (px, em, cm, മുതലായവ) വ്യക്തമാക്കിയിരിക്കുന്നു. മൂല്യങ്ങൾ വ്യക്തമാക്കുന്ന ക്രമം ഇപ്രകാരമാണ് (താഴത്തെ ചിത്രം): മൂല്യം/ങ്ങൾ സജ്ജീകരിച്ചിരിക്കുന്നു (ഒന്ന് മുതൽ നാല് വരെ) എച്ച്റൗണ്ടിംഗിന്റെ ഓറിസോണ്ടൽ (തിരശ്ചീന) ആരം, മൂല്യം / ഒരു സ്ലാഷിലൂടെ സജ്ജീകരിച്ചിരിക്കുന്നു (ഒന്ന് മുതൽ നാല് വരെ) വിലംബമായ (ലംബമായ). മൂല്യങ്ങളെ ശതമാനമായി സൂചിപ്പിക്കാൻ ഇത് അനുവദിച്ചിരിക്കുന്നു. നെഗറ്റീവ് മൂല്യങ്ങൾ അനുവദനീയമല്ല.

ബ്രൗസർ പിന്തുണ

സ്വത്ത്			ഓപ്പറ		IExplorer	എഡ്ജ്
അതിർത്തി-ആരം	5.0 4.0 -വെബ്കിറ്റ്-	4.0 3.0 -moz-	10.5	5.0 3.1 -വെബ്കിറ്റ്-	9.0	12.0

CSS വാക്യഘടന:

ബോർഡർ-റേഡിയസ്: "1-4 നീളം | 1-4% | 1-4 നീളം അല്ലെങ്കിൽ 1-4% / 1-4 നീളം അല്ലെങ്കിൽ 1-4% | പ്രാരംഭ | അവകാശം"; /* റേഡിയസ് നാല് കോണുകളിലും പ്രയോഗിക്കുന്നു (വൃത്താകൃതിയിലുള്ള ആർക്ക് പോലെ) */ബോർഡർ-റേഡിയസ് : 15px; /* ഒന്നാം മൂല്യം മുകളിൽ-ഇടത്, താഴെ-വലത്, രണ്ടാമത്തെ മൂല്യം മുകളിൽ-വലത്, താഴെ-ഇടത് */ബോർഡർ-റേഡിയസ് : 15px 35%; /* ഒന്നാം മൂല്യം മുകളിൽ-ഇടത്, രണ്ടാമത്തെ മൂല്യം മുകളിൽ-വലത്, താഴെ-ഇടത്, മൂന്നാമത്തെ മൂല്യം താഴെ-വലത് */ border-radius : 14px 18px 50%; /* ഒന്നാം മൂല്യം മുകളിൽ-ഇടത്, രണ്ടാമത്തേത് മുകളിൽ-വലത്, മൂന്നാമത്തെ താഴെ-വലത്, നാലാമത്തെ താഴെ-ഇടത് */ border-radius : 22% 11px 14px 15px; /
ലംബ ആരം - മൂല്യം നാല് മൂലകൾക്കും ബാധകമാണ് */ border-radius : 15px 15% / 15px; /* തിരശ്ചീന ആരം ഒന്നാം മൂല്യം മുകളിൽ-ഇടത്, താഴെ-വലത്, രണ്ടാമത്തെ മൂല്യം മുകളിൽ-വലത്, താഴെ-ഇടത്/
ലംബ ആരം - ഒന്നാം മൂല്യം മുകളിൽ-ഇടത്, താഴെ-വലത്, രണ്ടാമത്തെ മൂല്യം മുകളിൽ-വലത്, താഴെ-ഇടത് */ border-radius : 10px 15% / 10px 40px; /* തിരശ്ചീന ആരം ഒന്നാം മൂല്യം മുകളിൽ-ഇടത്, രണ്ടാമത്തെ മൂല്യം മുകളിൽ-വലത്, താഴെ-ഇടത്, മൂന്നാമത്തെ മൂല്യം താഴെ-വലത്/
ലംബ ആരം - ഒന്നാം മൂല്യം മുകളിൽ-ഇടത്, രണ്ടാമത്തെ മൂല്യം മുകളിൽ-വലത്, താഴെ-ഇടത്, മൂന്നാമത്തെ മൂല്യം താഴെ-വലത് */ border-radius : 20px 15px 6em / 20px 25px 30%; /* തിരശ്ചീന ആരം ഒന്നാം മൂല്യം മുകളിൽ-ഇടത്, താഴെ-വലത്, രണ്ടാമത്തെ മൂല്യം മുകളിൽ-വലത്, താഴെ-ഇടത്/
ലംബ ആരം - ഒന്നാം മൂല്യം മുകളിൽ-ഇടത്, രണ്ടാമത്തേത് മുകളിൽ-വലത്, മൂന്നാമത്തെ താഴെ-വലത്, നാലാമത്തെ താഴെ-ഇടത് */ബോർഡർ-റേഡിയസ് : 15px 15% / 10px 15em 15px 5em;

JavaScript വാക്യഘടന:

Object.style.borderRadius = "5px"

പ്രോപ്പർട്ടി മൂല്യങ്ങൾ

CSS പതിപ്പ്

CSS3

പാരമ്പര്യമായി

ഇല്ല.

ആനിമബിൾ

അതെ.

ഉപയോഗ ഉദാഹരണം

ക്ലാസ് = "ഓറഞ്ച്" > 50px

50px 25%

25px 75% / 4em