Sa tingin ko alam ng lahat na ang paggawa ng mga bilugan na sulok sa mga bloke ay isang malaking problema. Wala pang cross-browser na solusyon nang hindi gumagamit ng JS crutches. Sa paglabas ng IE9, mababawasan ang sakit ng ulo, ngunit kung abala ka pa rin sa pag-coding para sa IE6/7, hindi ito magiging kaligtasan para sa iyo. Ngunit kahit na ang IE6/7 ay lumubog sa limot, matatagalan pa rin bago natin makalimutan ang tungkol sa ika-8 bersyon ng browser na ito, na hindi rin sumusuporta sa parameter ng border-radius. Sa madaling salita, tatakbo ang aming mga site sa JavaScript steroid sa mahabang panahon.

Maraming mga artikulo ang isinulat sa paksa ng mga bilugan na hugis, ngunit lahat ng mga ito (mga mahahanap ko) ay tahimik tungkol sa mga subtleties at nuances ng paggamit ng mga pag-aayos para sa isang umiiral na problema. Susubukan kong ilista ang lahat ng mga paghihirap na naranasan ko kapag gumagamit ng mga sikat na solusyon.

Upang magsimula, sasabihin ko ang ilang mga salita tungkol sa kung paano nagbabago ang sitwasyon hangganan-radius kapag inilabas ang mga bagong bersyon ng browser.

Una, hindi na kailangan ng bersyon 4 ng FireFox ang sarili nitong -moz-border-radius parameter. Ang IE9, tulad ng nasabi ko na, ay nagpapatupad din ng suporta para sa border-radius, hindi bababa sa bersyon ng RC na ito ay naroroon na. Ang lahat ay naging mahusay sa Opera mula noong bersyon 10.5.

Ngayon mga solusyon para sa mga pinagkaitan ng Diyos.

At kaya, mayroong dalawang pinakakilala at ginagamit na mga pamamaraan gawing cross-browser ang border-radius. Ang una ay Curved-corner, na gumagamit VML at pag-uugali. Ang pangalawa ay ang CSS3 PIE, na mayroong dalawang pagpapatupad. Ang isa ay batay din sa VML at pag-uugali, ang pangalawa ay isang JavaScript library.

Isaalang-alang natin ang parehong mga solusyon.

Kurbadong-sulok

Isang kalamangan lang ang nakita ko - ang magaan na bigat ng kasamang border-radius.htc file. Kasalukuyang bersyon ang pagpapatupad ay tumatagal lamang ng 5kb. Laban sa PIE, na tumitimbang ng 33 kb, ito ay tiyak na isang makabuluhang kalamangan. Pero diyan nagtatapos ang mga positibo, at least para sa akin.

Mayroong maraming mga disadvantages. Halimbawa, ang sumusunod na konstruksyon ay hindi gagana:

#selector ( border: #c6c5c2 1px solid; border-top: none; border-radius: 0 0 6px 6px; background: #f0ecdf; behavior: url(border-radius.htc); )

Una, hindi mo maaaring alisin ang frame mula sa isa sa mga gilid. Iyon ay, ang border-top na parameter ay magdaragdag ng hangganan sa buong block, bagama't ang mga sulok ay mananatiling bilugan. Ito ay nakakatawa, ngunit ang border-bottom parameter ay iiwan ang frame sa lugar, ngunit hindi magbibigay ng anumang epekto, iyon ay, ang hangganan ay mananatili sa paligid ng buong bloke.

Pangalawa, kung kailangan mo lamang i-trim ang dalawang sulok, tulad ng sa halimbawa, kung gayon ikaw ay mabibigo. Kurbadong-sulok hindi magagawa iyon. Maaari lamang nitong bilugan ang lahat ng sulok ng bloke at sa pamamagitan ng katumbas na halaga ng radius. Ang mga sulok na may iba't ibang curvature radii ay hindi makakamit. Ang tama at gumaganang bersyon ay ganito ang hitsura:

#selector ( border: #c6c5c2 1px solid; border-radius: 6px; behavior: url(border-radius.htc); )

Pangatlo, hindi gumagana ang Curved-corner para sa mga bloke na may larawan bilang background.

Well ang huli hindi kanais-nais na sandali- bilis ng trabaho. Ang mga sulok ay hindi agad bilugan. Mula sa sandaling nag-load ang pahina hanggang sa tumagal ang mga anggulo ang kinakailangang form, tumatagal ng halos isang segundo. Sa paningin, ang pagkaantala ay kapansin-pansin at malinaw na kapansin-pansin.

Mayroong ilang iba pang mga problema (basahin ang mga detalye), ngunit hindi ko na matandaan ngayon.

Upang ibuod, maaari nating sabihin na ang pag-aayos na ito ay angkop lamang para sa napakasimpleng mga gawain. Bagaman, tulad ng ipinapakita sa pagsasanay, ang mga simpleng gawain ay bihirang makaharap.

CSS3 PIE

Napakabigat nito, wala kang masabi. Ang bersyon ng PIE 1.0 beta 4 ay tumatagal ng 33 kb, pareho sa pagpapatupad ng .htc at sa js analogue. Ngunit kasabay nito, wala sa CSS3 PIE ang lahat ng problema sa border-radius na mayroon ang Curved-corner. Gusto ko rin talaga ang kakayahang gumamit ng pagpapatupad ng JS na hindi nangangailangan karagdagang code sa CSS at maaaring kumabit sa anumang tagapili (kapag gumagamit ng jQuery, halimbawa).

Ang CSS3 PIE ay mayroon ding pagkaantala sa pag-render (minsan hindi), ngunit ito ay makabuluhang mas mababa kaysa sa kaso ng Curved-corner. Ito ay halos hindi nakikita, na ginagawang kaakit-akit at magagamit ang aklatan.

Well, ang magandang bagay ay na inaayos ng CSS3 PIE ang problema hindi lamang sa hangganan-radius, ngunit nagdaragdag din ng malaking bilang ng mga katangian ng CSS3 sa mga browser ng Microsoft. Ito ay kung paano, halimbawa, border-image at box-shadow, ang mga katangian para sa pagtatrabaho sa mga gradient ay gagana. Ang problema ay nalulutas png transparency at marami pang iba. Ang lahat ng ito ay sikat na nagbabayad at nagpapaliwanag sa laki ng CSS3 PIE.

Lumipad pa rin sa pamahid

Sa kasamaang palad, alinman sa CSS3 PIE o Curved-corner ay hindi kayang isaksak ang lahat ng mga bitak. Kaya, halimbawa, hindi ka makakakuha ng mga pabilog na sulok para sa mga elementong iyon na unang nakatago - mayroon silang display: none parameter. Katulad din sa nakikitang parameter at sa nakatagong halaga nito. Maaaring lumitaw ang mga problema kung ang elemento ay ganap na nakaposisyon. Naku, bigyan detalyadong paglalarawan Hindi ko mailarawan ang sitwasyon, dahil hindi ko na ulitin ang mga kondisyon kung saan lumitaw ang mga problema, ngunit natatandaan ko na tiyak na may mga problema.

May isa pang catch na alam ko. Upang maglapat ng border-radius sa isang elemento kapag nag-hover ang mouse sa ibabaw nito, tulad nito:

A:hover ( background: #ccc; color: #000; border: #ccc 1px solid; border-radius: 6px )

Kinakailangan na ang elementong ito ay may mga bilugan na sulok sa simula, kung hindi man ay walang epekto. Ibig sabihin, sa sa halimbawang ito, dapat mayroong isang selector A na magkakaroon din ng hangganan-radius at hangganan na tinukoy:

A ( background: #fff; color: #000; border: #fff 1px solid; border-radius: 6px ) a:hover (background: #ccc; color: #000; border: #ccc 1px solid; border-radius: 6px)

Mga resulta

Para sa akin personal, ang aking ganap na paborito ay CSS3 PIE. Talagang ginagawa nito ang trabaho nito at ginagawa ito ng maayos. Bilang karagdagan, ang silid-aklatan ay umuunlad. Ang pag-unlad na ito ay sinamahan ng regular na paglabas ng mga bagong bersyon, na lubhang nakapagpapatibay.

Sigurado akong pamilyar ka na sa border css property. May matututunan ka bang bago na hindi mo alam noon tungkol sa css border? Buweno, hindi ka lamang matututo, ngunit makakakita ka rin ng ilang mga bagong bagay na hindi mo pa alam!

Hindi lamang magagamit ang CSS3 upang lumikha ng mga bilugan na sulok, ngunit magagamit din ang purong CSS code upang lumikha ng mga kumplikadong hugis. Dati, maaari mong gamitin ang background-image upang bigyan ang hitsura ng mga bilugan na sulok. Salamat sa mga bagong diskarte sa paggamit ng border, magagawa namin ito gamit ang purong CSS code.

Mga pangunahing kaalaman sa paggamit ng css border

Malamang pamilyar ka na sa karaniwang gamit mga katangian ng hangganan:

Border: 1px solid black;

Ang code sa itaas ay maglalabas ng 1px na hangganan na magiging itim. Madali at simple. Maaari mo ring palawakin nang kaunti ang syntax:

Lapad ng hangganan: makapal; border-style: solid; kulay ng hangganan: itim;

Bilang karagdagan, maaari kang gumamit ng mga partikular na halaga mga katangian ng hangganan-lapad, tatlo mga keyword: manipis, katamtaman, makapal.

Ngunit ang paggamit ng pinahabang syntax ay hindi palaging praktikal. Tingnan natin ang isang halimbawa kapag kailangan mong baguhin ang kulay ng isang block frame kapag ini-hover ang mouse. Sa kasong ito, ang paggamit ng shorthand syntax ay mas simple:

Box ( border: 1px solid red; ) .box:hover ( border: 1px solid green; )

Ang isang mas elegante at mas simpleng paraan upang gawin ito ay:

Box ( border: 1px solid red; ) .box:hover ( border-color: green; )

Tulad ng nakikita mo, ang advanced na diskarte ay kapaki-pakinabang din kapag binago namin ang ilang mga katangian lamang: lapad, estilo, kulay at iba pa.

Border-Radius

Border-radius- Ito ang "ginintuang" pag-aari ng CSS3 - ang una, pinakakaraniwang pag-aari na naging praktikal at kapaki-pakinabang. Maliban sa IE8 at mga bersyon sa ibaba, ang lahat ng mga browser ay nagpapakita ng mga bilugan na sulok gamit ito.

Bagaman, kinakailangang gumamit ng mga espesyal na prefix para sa Webkit at Mozilla para maging tama ang pag-istilo.

Webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;

Sa ngayon, maaari nating alisin ang mga espesyal na prefix at gamitin ang karaniwang form na border-radius.

Ang isa pang perk ay maaari kaming gumamit ng mga espesyal na halaga para sa bawat panig ng bloke:

Border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;

Sa code sa itaas, ang pagtatakda ng border-top-right-radius at border-bottom-left-radius sa "null" ay maaaring makamit ang ilang kamangha-manghang mga hugis. Bagama't maaaring magmana ang elemento ng ilang katangian na kailangang i-reset.

Katulad ng margin at padding, maaari nating i-compress ang syntax:

/* kaliwa sa itaas, kanang itaas, kanang ibaba, kaliwang ibaba */ radius ng hangganan: 20px 0 30px 0;

Bilang halimbawa ng paggamit ng border-radius property, magpapakita ako sa iyo ng "lemon" na kadalasang ginagamit ng mga designer kapag nagdidisenyo ng mga website:

Lemon ( lapad: 200px; taas: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px; )

Higit pa tayo sa mga pangunahing kaalaman

Para sa maraming mga designer, ang lahat ng kaalaman sa larangan ng CSS border properties ay nagtatapos dito. Ngunit may ilang iba pang mga cool na bagay na maaari mong gamitin upang lumikha ng mga kamangha-manghang bagay!

Mga kumplikadong istruktura ng hangganan ng css

Maraming mga pamamaraan para sa paglikha ng mga disenyo gamit ang mga kumplikadong istruktura ng hangganan. Halimbawa, tingnan natin ang sumusunod...

Border-Estilo

Palagi naming ginagamit ang pinakasikat na mga katangian na solid, putol-putol at may tuldok. Ngunit mayroong ilang iba pang mga katangian ng istilo ng hangganan: uka at tagaytay.

Border: 20px groove #e3e3e3;

O sa pinahabang syntax:

Kulay ng hangganan: #e3e3e3; lapad ng hangganan: 20px; border-style: uka;

Bagama't kapaki-pakinabang ang mga katangiang ito, hindi ito ang batayan para sa paglikha ng mga kumplikadong frame.

Balangkas

Ang pinakasikat na pamamaraan ng paglikha dobleng frame- paggamit ng outline property.

Kahon ( border: 5px solid #292929; outline: 5px solid #e3e3e3; )

Mahusay na gumagana ang pamamaraang ito, bagama't nililimitahan tayo nito sa dalawang frame lamang. Minsan kailangan mong lumikha ng gradient na hangganan na binubuo ng maraming mga layer... paano kung gayon?

Mga pseudo-element

Kapag hindi sapat ang outline technique, alternatibong paraan ay ang paggamit ng pseudo elements:before and:after. Kung saan maaari mong idagdag karagdagang mga frame sa elemento:

Box ( width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green; ) /* Lumikha ng dalawang kahon na may parehong lapad ng lalagyan */ .box:after, .box:before ( nilalaman: ""; posisyon: ganap na kaliwa: 0;

Hindi ito mukhang napaka-elegante, ngunit hindi bababa sa ito ay gumagana. Medyo mahirap malaman ang pagkakasunud-sunod ng mga kulay sa loob ng mga frame... ngunit maiintindihan mo.

Kahon-Anino

Ang isang kawili-wiling "paraan ng mga bata" upang lumikha ng katulad na epekto ay ang paggamit ng CSS3 box-shadow property:

Kahon ( hangganan: 5px solid na pula; box-shadow: 0 0 0 5px berde, 0 0 0 10px dilaw, 0 0 0 15px orange; )

Sa kasong ito, kami ay mas matalino at gumamit ng nakalaang box-shadow property. Sa pamamagitan ng pagpapalit ng x, y, blur na mga parameter sa zero, maaari tayong gumamit ng iba't ibang kulay upang lumikha ng maraming mga frame.

Ngunit may problema: sa mga mas lumang browser na hindi naiintindihan ang box-shadow property, isang 5px na pulang frame lang ang makikita.

“Tandaan mo! Ang disenyo ng site ay dapat magmukhang cross-browser, iyon ay, pareho sa lahat ng mga browser. Kasama ang mga mas lumang bersyon."

Pagbabago ng mga anggulo

Bukod sa ginamit simpleng kahulugan border-radius, maaari naming tukuyin ang dalawang magkahiwalay - paghihiwalay sa kanila sa pamamagitan ng / ipahiwatig namin ang pahalang at patayong radius.

Halimbawa:

Border-radius: 50px / 100px; /* pahalang na radius, patayong radius */

... ito ay katumbas ng:

Border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;

Ang pamamaraan na ito ay angkop para sa paglikha ng mga natatanging hugis ng bloke. Halimbawa, narito kung paano lumikha ng epekto ng nakabalot na papel:

Kahon ( lapad: 200px; taas: 200px; background: #666; border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; )

Mga form ng CSS gamit ang border

Ipinapakita ng diskarteng ito kung paano ka makakagawa ng mga CSS form, habang gumagamit ng mga elemento na may zero na sukat taas at lapad. Nagulat? Tingnan natin ang isang halimbawa...

Para sa susunod na ilang halimbawa, gagamitin namin ang sumusunod na markup:

...at ang sumusunod na pangunahing istilo:

Kahon ( lapad: 200px; taas: 200px; background: itim; )

Ang pinakakaraniwang halimbawa ng paggamit ng mga hugis ng CSS ay ang paggawa ng isang wrapping arrow. Ang sikreto sa arrow na ito ay namamalagi sa paglikha ng isang hangganan na may ibang kulay para sa bawat panig. Pagkatapos, itakda ang mga katangian ng lapad at taas sa 0.

Italaga natin ang klase ng arrow sa div block:

Arrow ( width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid green; border-bottom: 100px solid blue; border-left: 100px solid yellow; )

Upang ipakita, ginagamit muna namin ang pinahabang syntax. Susunod, maaari naming alisin ang dagdag na code gamit ang shorthand syntax:

Arrow ( lapad: 0; taas: 0; hangganan: 100px solid; kulay ng hangganan: pula berdeng asul na dilaw; )

Kawili-wili, hindi ba? Ngayon ay i-install namin mga transparent na kulay sa lahat ng panig maliban sa asul na bahagi.

Arrow ( width: 0; height: 0; border: 100px solid; border-bottom-color: blue; )

Ito ay naging mahusay! Ngunit ito ay sumasalungat semantikong layout, lumikha ng .arrow div, para lang magdagdag ng arrow sa page. Para sa layuning ito, maaari tayong gumamit ng mga pseudo-element, na kung ano ang gagawin natin ngayon.

Gumawa ng Speech Bubble

Upang lumikha ng Speech Bubble, kailangan namin ng isang maliit na piraso purong CSS code at isang div block.

Speech-bubble ( position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; )

Speech-bubble:after ( content: ""; )

Sa yugtong ito, gagawa kami ng arrow na ginawa namin dati, idagdag ito sa elemento at ang natitira na lang ay ilagay ito:

Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-color: red green blue yellow; )

Kung gusto nating tumuro ang arrow pababa, kailangan nating itakda ang lahat ng mga hangganan sa transparent maliban sa tuktok.

Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-top-color: red; )

Kapag ginawa namin ang CSS form na ito, hindi namin partikular na matutukoy ang laki ng arrow. Sa halip, maaari naming itakda ang border-width property, na magtatalaga ng laki sa arrow. Itatakda din namin ang posisyon ng arrow sa ibaba sa gitna. Alinsunod dito, ginagamit namin ang mga halaga sa itaas at kaliwa.

Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: red; top: 100%; left: 50%; )

Bilang karagdagan, kailangan lang nating bigyan ito ng kulay na kapareho ng bloke. Tandaan, kapag nagpoposisyon, kailangan mong isaalang-alang ang laki ng iba pang mga hangganan, na hindi nakikita (15px). Ibibigay din namin ang block rounding sa mga sulok.

Speech-bubble ( /* … ibang mga istilo */ border-radius: 10px; ) .speech-bubble:after ( content: ""; posisyon: absolute; lapad: 0; taas: 0; border: 15px solid; border-top -kulay: #292929 sa itaas: 100%;

Hindi masama, ha? Gamit ang ilang mga klase ng CSS at mga trick sa hangganan, maaari kang lumikha ng ganoong bagay.

/* Paggamit ng Speech Bubbles: Ilapat ang klase .speech-bubble at .speech-bubble-DIRECTION gaya ng ipinapakita sa ibaba

Bonus! Vertical centering sa loob ng block

Para sa isang linya ng teksto, maaari mong gamitin ang taas ng linya. Ngunit kung mayroon kang dalawa o higit pang mga linya ng teksto... Ang pinakamahusay na solusyon ay itakda ang display property sa talahanayan, at ilagay ang lahat ng teksto sa isang talata. Ito ang hitsura sa html markup:

Speech-bubble ( /* ibang mga istilo */ display: table; ) .speech-bubble p ( display: table-cell; vertical-align: middle; )

Hindi namin nililimitahan ang aming sarili sa mga tatsulok. Ang CSS ay may kakayahang magpakita ng iba't ibang hugis - kahit na mga puso at isang biohazard sign.

Biohazard ( lapad: 0; taas: 0; border: 60px solid; border-radius: 50%; border-top-color: black; border-bottom-color: black; border-left-color: yellow; border-right- kulay: dilaw)

Konklusyon

Sa nakaraang aralin, natutunan namin kung paano magtakda ng hangganan para sa isang elemento. Tiningnan din namin ang mga katangian tulad ng border-color at border-style , kung saan maaari mong i-customize ang kulay at istilo ng border. Gayunpaman, ang lahat ng aming mga frame ay lumabas na may tamang anggulo. Ngayon ay ipapakita namin sa iyo kung paano lumikha ng mga bilugan na sulok sa CSS para sa mga hangganan.

Paano Mag-round Corner: CSS3 border-radius Property

Maaaring gawin ang mga rounding corner sa CSS para sa anumang elemento sa isang HTML page. Upang gawin ito, kailangan mong ilapat ang pag-aari ng border-radius dito na may naaangkop na halaga. Kadalasan ang halaga ay tinukoy sa mga pixel, ngunit ang iba pang mga yunit ay maaari ding gamitin, tulad ng em o porsyento (sa huling kaso, ang pagkalkula ay nauugnay sa lapad ng bloke).

Epekto ng ari-arian na ito mapapansin lamang kung ang elementong ini-istilo ay may kulay na background at/o hangganan. Halimbawa:

BorderElement (kulay ng background: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; )

Ang istilong inilarawan sa itaas ay magbibigay ng sumusunod na resulta sa elemento

laki 200x200 pixels:

Maaari ka ring gumawa ng mga bilugan na gilid para lang sa itaas o ibabang sulok ng elemento, o bigyan ang bawat sulok ng ibang rounding radius - maraming puwang para sa imahinasyon! Halimbawa:

BorderElement ( background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; ) .borderElement1 ( background-color: #FFE8DB; border: 6px solid #FF5A00; border-radius: 15px 100px 15px 100px; )

Ngunit hindi lang iyon: sa halip na mga simpleng bilog na sulok, maaari mong tukuyin ang isang elliptical rounding. Upang gawin ito, kakailanganin mong tukuyin ang dalawang halaga na pinaghihiwalay ng isang slash (para sa pahalang at patayong semi-axes ng ellipse). Magbigay tayo ng halimbawa sa isang bloke ng 150x450 pixels:

BorderElement (kulay ng background: #EEDDFF; border: 6px solid #7922CC; border-radius: 280px/100px; )

Maaari mong paghaluin ang mga halaga (ibig sabihin, gumamit ng parehong regular at elliptical na bilugan sa parehong istilo), at maaari ka ring magdagdag ng personal na istilo para sa bawat sulok gamit ang naaangkop na mga katangian:

• border-top-left-radius - para sa kaliwang sulok sa itaas;
• border-top-right-radius - para sa kanang sulok sa itaas;
• border-bottom-left-radius - para sa kaliwang sulok sa ibaba;
• border-bottom-right-radius - para sa kanang sulok sa ibaba.

Ang prinsipyo ng rounding corners

Ipinapakita ng larawan sa ibaba kung paano kinakalkula ang pag-ikot ng sulok sa CSS. Kaya, kung ang isang solong halaga ay tinukoy para sa anggulo - halimbawa, 20px - nangangahulugan ito na ang pag-ikot ay magaganap sa isang bilog na may radius na 20 pixels. Sa kaso kung saan ang dalawang halaga ay tinukoy na pinaghihiwalay ng isang slash, halimbawa, 30px/20px , ang mga sulok ay bilugan sa isang ellipse. Ang unang value sa kasong ito ay ang haba ng pahalang na semi-axis ng ellipse - 30px, at ang pangalawang value ay ang haba ng vertical na semi-axis - 20px:

Ang CSS border-radius property ay sinusuportahan ng lahat modernong bersyon mga browser.

Ang pag-aari ng border-radius ay hindi nalalapat sa mga elemento ng talahanayan kapag may nakabahagi o magkahiwalay na mga hangganan."> border-collapse ay pagbagsak .

Tandaan: Tulad ng anumang shorthand property, ang mga indibidwal na sub-properties ay hindi maaaring magmana, tulad ng sa border-radius:0 0 inherit inherit , na bahagyang mag-o-override sa mga kasalukuyang kahulugan. Sa halip, kailangang gamitin ang mga indibidwal na longhand property.

Syntax

/* Ang syntax ng unang radius ay nagbibigay-daan sa isa hanggang apat na halaga *//* Nakatakda ang radius para sa lahat ng 4 na panig */ border-radius: 10px; /* itaas-kaliwa-at-ibaba-kanan | itaas-kanan-at-ibaba-kaliwa*/ border-radius: 10px 5%; /* kaliwa sa itaas | itaas-kanan-at-ibaba-kaliwa | ibabang kanan*/ border-radius: 2px 4px 2px; /* kaliwa sa itaas | kanang itaas | ibabang kanan | ibaba-kaliwa*/ border-radius: 1px 0 3px 4px; /* Ang syntax ng pangalawang radius ay nagbibigay-daan sa isa hanggang apat na value*/ /* (mga halaga ng unang radius) / radius*/ border-radius: 10px 5% / 20px; /* (mga halaga ng unang radius) / itaas-kaliwa-at-ibaba-kanan | itaas-kanan-at-ibaba-kaliwa*/ border-radius: 10px 5% / 20px 30px; /* (mga halaga ng unang radius) / kaliwa sa itaas | itaas-kanan-at-ibaba-kaliwa | ibabang kanan*/ border-radius: 10px 5px 2em / 20px 25px 30%; /* (mga halaga ng unang radius) / kaliwa sa itaas | kanang itaas | ibabang kanan | ibaba-kaliwa*/ border-radius: 10px 5% / 20px 25em 30px 35em; /* Global values ​​​​*/ border-radius: magmana; hangganan-radius: inisyal; border-radius: hindi nakatakda;

Ang pag-aari ng border-radius ay tinukoy bilang:

• isa, dalawa, tatlo, o apat na uri ng data ng CSS ay kumakatawan sa isang halaga ng distansya. Maaaring gamitin ang mga haba sa maraming katangian ng CSS, gaya ng lapad, taas, margin, padding, lapad ng hangganan, laki ng font, at anino ng teksto."> o ang uri ng data ng CSS ay kumakatawan sa isang halaga ng porsyento. Ito ay kadalasang ginagamit upang tukuyin ang isang sukat bilang kaugnay sa isang elemento ng parent object. Maraming mga katangian ang maaaring gumamit ng mga porsyento tulad ng lapad ng taas ng margin padding at laki ng font.> mga halaga. Ito ay ginagamit upang magtakda ng isang solong radius para sa mga sulok.
• opsyonal na sinusundan ng "/" at isa, dalawa, tatlo, o apat o Mga halaga. Ito ay ginagamit upang magtakda ng karagdagang radius, para magkaroon ka ng mga elliptical na sulok.

Mga halaga

radius		Ang isang uri ng data ng CSS ay kumakatawan sa isang halaga ng distansya. Maaaring gamitin ang mga haba sa maraming katangian ng CSS, gaya ng lapad, taas, margin, padding, lapad ng hangganan, laki ng font, at anino ng teksto."> o isang uri ng data ng CSS ay kumakatawan sa isang halaga ng porsyento. Ito ay kadalasang ginagamit upang tukuyin ang isang sukat bilang kaugnay sa isang elemento ng parent object. Maraming mga katangian ang maaaring gumamit ng mga porsyento tulad ng lapad ng taas ng margin padding at laki ng font.> nagsasaad ng radius na gagamitin para sa hangganan sa bawat sulok ng hangganan. Ito ay ginagamit lamang sa isang-halagang syntax.
itaas-kaliwa-at-ibaba-kanan		Ang isang uri ng data ng CSS ay kumakatawan sa isang halaga ng distansya. Maaaring gamitin ang mga haba sa maraming katangian ng CSS, gaya ng lapad, taas, margin, padding, lapad ng hangganan, laki ng font, at anino ng teksto."> o isang uri ng data ng CSS ay kumakatawan sa isang halaga ng porsyento. Ito ay kadalasang ginagamit upang tukuyin ang isang sukat bilang kaugnay sa isang elemento ng parent object. Maraming mga katangian ang maaaring gumamit ng mga porsyento tulad ng lapad ng taas ng margin padding at laki ng font.> nagsasaad ng radius na gagamitin para sa hangganan sa kaliwang itaas at kanang sulok sa ibaba ng kahon ng elemento. Ginagamit lang ito sa syntax na may dalawang halaga.
itaas-kanan-at-ibaba-kaliwa		Ang isang uri ng data ng CSS ay kumakatawan sa isang halaga ng distansya. Maaaring gamitin ang mga haba sa maraming katangian ng CSS, gaya ng lapad, taas, margin, padding, lapad ng hangganan, laki ng font, at anino ng teksto."> o isang uri ng data ng CSS ay kumakatawan sa isang halaga ng porsyento. Ito ay kadalasang ginagamit upang tukuyin ang isang sukat bilang kaugnay sa isang elemento ng parent object. Maraming mga katangian ang maaaring gumamit ng mga porsyento tulad ng lapad ng taas ng margin padding at laki ng font.> nagsasaad ng radius na gagamitin para sa hangganan sa kanang itaas at kaliwang sulok sa ibaba ng kahon ng elemento. Ginagamit lang ito sa mga syntax na dalawa at tatlong halaga.
kaliwa sa itaas		Ang isang uri ng data ng CSS ay kumakatawan sa isang halaga ng distansya. Maaaring gamitin ang mga haba sa maraming katangian ng CSS, gaya ng lapad, taas, margin, padding, lapad ng hangganan, laki ng font, at anino ng teksto."> o isang uri ng data ng CSS ay kumakatawan sa isang halaga ng porsyento. Ito ay kadalasang ginagamit upang tukuyin ang isang sukat bilang kaugnay sa isang elemento ng parent object. Maraming mga katangian ang maaaring gumamit ng mga porsyento tulad ng lapad ng taas ng margin padding at laki ng font.> nagsasaad ng radius na gagamitin para sa hangganan sa kaliwang sulok sa itaas ng kahon ng elemento. Ginagamit lang ito sa mga syntax na tatlo at apat na halaga.
kanang itaas		Ang isang uri ng data ng CSS ay kumakatawan sa isang halaga ng distansya. Maaaring gamitin ang mga haba sa maraming katangian ng CSS, gaya ng lapad, taas, margin, padding, lapad ng hangganan, laki ng font, at anino ng teksto."> o isang uri ng data ng CSS ay kumakatawan sa isang halaga ng porsyento. Ito ay kadalasang ginagamit upang tukuyin ang isang sukat bilang kaugnay sa isang elemento ng parent object. Maraming mga katangian ang maaaring gumamit ng mga porsyento tulad ng lapad ng taas ng margin padding at laki ng font.> nagsasaad ng radius na gagamitin para sa hangganan sa kanang sulok sa itaas ng kahon ng elemento. Ginagamit lang ito sa syntax na may apat na halaga.
ibabang kanan		Ang isang uri ng data ng CSS ay kumakatawan sa isang halaga ng distansya. Maaaring gamitin ang mga haba sa maraming katangian ng CSS, gaya ng lapad, taas, margin, padding, lapad ng hangganan, laki ng font, at anino ng teksto."> o isang uri ng data ng CSS ay kumakatawan sa isang halaga ng porsyento. Ito ay kadalasang ginagamit upang tukuyin ang isang sukat bilang kaugnay sa isang elemento ng parent object. Maraming mga katangian ang maaaring gumamit ng mga porsyento tulad ng lapad ng taas ng margin padding at laki ng font.> nagsasaad ng radius na gagamitin para sa hangganan sa kanang sulok sa ibaba ng kahon ng elemento. Ginagamit lang ito sa mga syntax na tatlo at apat na halaga.
ibaba-kaliwa		Ang isang uri ng data ng CSS ay kumakatawan sa isang halaga ng distansya. Maaaring gamitin ang mga haba sa maraming katangian ng CSS, gaya ng lapad, taas, margin, padding, lapad ng hangganan, laki ng font, at anino ng teksto."> o isang uri ng data ng CSS ay kumakatawan sa isang halaga ng porsyento. Ito ay kadalasang ginagamit upang tukuyin ang isang sukat bilang kaugnay sa isang elemento ng parent object. Maraming mga katangian ang maaaring gumamit ng mga porsyento tulad ng lapad ng taas ng margin padding at laki ng font.> nagsasaad ng radius na gagamitin para sa hangganan sa ibabang kaliwang sulok ng kahon ng elemento. Ginagamit lang ito sa apat na halagang syntax.

Ang uri ng data ng CSS ay kumakatawan sa isang halaga ng distansya. Maaaring gamitin ang mga haba sa maraming katangian ng CSS, gaya ng lapad, taas, margin, padding, lapad ng hangganan, laki ng font, at anino ng teksto."> Tinutukoy ang laki ng radius ng bilog, o ang semi-major at semi-minor axes ng ellipse, gamit ang mga halaga ng haba. Ang mga negatibong halaga ay hindi wasto. Ang uri ng data ng CSS ay kumakatawan sa isang halaga ng porsyento. Ito ay kadalasang ginagamit upang tukuyin ang isang sukat bilang kaugnay sa isang elemento ng parent object. Maraming mga katangian ang maaaring gumamit ng mga porsyento tulad ng lapad ng taas ng margin padding at laki ng font.> Tinutukoy ang laki ng radius ng bilog, o ang semi-major at semi-minor axes ng ellipse, gamit ang mga halaga ng porsyento. Ang mga porsyento para sa pahalang na axis ay tumutukoy sa lapad ng kahon; ang mga porsyento para sa vertical axis ay tumutukoy sa taas ng kahon. Ang mga negatibong halaga ay hindi wasto.

Border-radius: 1em/5em; /* ... ay katumbas ng: */ border-top-left-radius: 1em 5em; border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em;

border-radius: 4px 3px 6px / 2px 4px; /* ... ay katumbas ng: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px;

1,4 / 1,4

Pormal na syntax
= !}

Ang CSS data type ay kumakatawan sa isang percentage value. Ito ay kadalasang ginagamit upang tukuyin ang isang laki bilang nauugnay sa isang elemento

Mga halimbawa

hangganan: solid 10px;

/* ang hangganan ay liko sa isang "D" */ border-radius: 10px 40px 40px 10px;

hangganan: uka 1em pula;	hangganan-radius: 2em;	background:gold;
hangganan: tagaytay ginto; hangganan-radius: 13em/3em;	hangganan: wala;	border-radius: 40px 10px;

hangganan: wala;
hangganan-radius: 50%;	hangganan: may tuldok; lapad ng hangganan: 10px 4px; border-radius: 10px 40px;
hangganan: dashed;	lapad ng hangganan: 2px 4px;
border-radius: 40px;	Mga Live na Sample
Mga pagtutukoy	Pagtutukoy
Katayuan	Magkomento Mga Background at Border ng CSS Antas 3 ng Module Ang kahulugan ng "border-radius" sa detalyeng iyon. Rekomendasyon ng Kandidato Paunang kahulugan Ang kahulugan ng "border-radius" sa detalyeng iyon. Rekomendasyon ng Kandidato Paunang halaga Ang kahulugan ng "border-radius" sa detalyeng iyon. Rekomendasyon ng Kandidato border-top-right-radius : dalawang ganap na uri ng data ng CSS ay kumakatawan sa isang halaga ng distansya. Maaaring gamitin ang mga haba sa maraming katangian ng CSS, gaya ng lapad, taas, margin, padding, lapad ng hangganan, laki ng font, at anino ng teksto."> Ang kahulugan ng "border-radius" sa detalyeng iyon. Rekomendasyon ng Kandidato
Uri ng animation	Magkomento border-top-left-radius : ang uri ng data ng CSS ay isinasama bilang tunay, mga floating-point na numero.">haba , ang uri ng data ng CSS ay isinasama bilang totoo, mga floating-point na numero.">porsiyento o calc(); border-top-right-radius : ang uri ng data ng CSS ay isinasama bilang tunay, mga floating-point na numero.">haba , ang uri ng data ng CSS ay isinasama bilang tunay, mga floating-point na numero.">porsiyento o calc(); border-bottom-right-radius : ang uri ng data ng CSS ay isinasama bilang tunay, mga floating-point na numero.">haba , ang uri ng data ng CSS ay isinasama bilang tunay, mga floating-point na numero.">porsiyento o calc(); border-bottom-left-radius : ang isang uri ng data ng CSS ay isinasama bilang tunay, mga floating-point na numero.">length , ang uri ng data ng CSS ay isinasama bilang tunay, mga floating-point na numero.">porsiyento o calc();
Canonical order	ang natatanging di-malabong ayos na tinukoy ng pormal na gramatika

Pagkatugma sa browser

Ang talahanayan ng compatibility sa page na ito ay nabuo mula sa structured data. Kung gusto mong mag-ambag sa data, pakitingnan ang https://github.com/mdn/browser-compat-data at padalhan kami ng pull request.

I-update ang data ng compatibility sa GitHub

	Desktop						Mobile
	Chrome	gilid	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome para sa Android	Edge Mobile	Firefox para sa Android	Opera para sa Android	Safari sa iOS	Samsung Internet
Pangunahing suporta	Buong suporta ng Chrome 4 Mga Tala Buong suporta 4 Mga Tala Mga Tala mga elemento maliban kung ang -webkit-appearance ay na-override sa isang naaangkop na halaga. Buong suporta 1 Prefixed	Prefixed Buong suporta 1 Prefixed Edge Buong suporta 12 Buong suporta 12 Buong suporta 12	Ipinatupad gamit ang prefix ng vendor: -webkit- Mga Tala Buong suporta 4 Mga Tala Mga Tala Buong suporta ng Firefox 4 Bago ang Firefox 50, ang mga istilo ng hangganan ng mga bilugan na sulok (na may hangganan-radius) ay palaging nai-render na parang solid ang istilo ng hangganan . Ito ay may ay naayos sa Firefox 50. Mga Tala Upang umayon sa pamantayan ng CSS3, binabago ng Firefox 4 ang pangangasiwa ng mga halaga upang tumugma sa detalye. kaya mo Buong suporta 1 Prefixed tukuyin ang isang ellipse bilang isang hangganan sa isang arbitrary na laki ng elemento na may hangganan-radius: 50%; . Gumagawa din ang Firefox 4 ng mga bilugan na sulok na clip ng nilalaman at mga larawan kung ang : visible ay hindi nakatakda.	Walang suporta 1 - 12	Ipinatupad gamit ang prefix ng vendor: -moz- Mga Tala IE Buong suporta 9 Mga Tala Mga Tala Sa Opera bago ang bersyon 11.60, ang mga pinalitan na elemento na may border-radius ay hindi magkakaroon ng mga bilugan na sulok.	Safari Buong suporta 5 Mga Tala Buong suporta 5 Mga Tala Mga Tala Binabalewala ng mga kasalukuyang bersyon ng Chrome at Safari ang border-radius sa mga elemento maliban kung ang -webkit-appearance ay na-override sa isang naaangkop na halaga. Buong suporta 1 Prefixed Edge Buong suporta 12 Buong suporta 12 Buong suporta 12	Buong suporta 3 Buong suporta 1 WebView Android Buong suporta 2 Buong suporta 1 Prefixed Edge Buong suporta 12 Buong suporta 12 Buong suporta 12		Buong suporta 2 Buong suporta 1 Prefixed Edge Buong suporta 12 Buong suporta 12 Buong suporta 12	Edge Mobile Buong suporta Oo Buong suporta Oo Buong suporta Oo Mga Tala Firefox Android Buong suporta Oo Mga Tala Mga Tala Buong suporta Oo	Bago ang Firefox 50, ang mga istilo ng hangganan ng mga bilugan na sulok (na may hangganan-radius) ay palaging nai-render na parang solid ang istilo ng hangganan . Naayos na ito sa Firefox 50.	Opera Android Buong suporta
Safari iOS Buong suporta Oo	Elliptical na mga hangganan Mga Tala Firefox Android Buong suporta Oo Mga Tala Mga Tala Chrome Buong suporta Oo	Bago ang Chrome 4, hindi sinusuportahan ang slash / notation. Kung ang dalawang halaga ay tinukoy, ang isang elliptical na hangganan ay iguguhit sa lahat ng apat na sulok. -webkit-border-radius: 40px 10px; ay katumbas ng border-radius: 40px/10px; .	Edge Buong suporta 12	Buong suporta ng Firefox 3.5	IE Buong suporta Oo	Opera Buong suporta Oo Mga Tala Firefox Android Buong suporta Oo Mga Tala Mga Tala Safari Buong suporta Oo	Bago ang Safari 4.1, hindi sinusuportahan ang slash / notation. Kung ang dalawang halaga ay tinukoy, ang isang elliptical na hangganan ay iguguhit sa lahat ng apat na sulok. -webkit-border-radius: 40px 10px; ay katumbas ng border-radius: 40px/10px; .	WebView Android?				Chrome Android Buong suporta Oo	Safari iOS?
Samsung Internet Android Buong suporta Oo	4 na halaga para sa 4 na sulok	Bago ang Chrome 4, hindi sinusuportahan ang slash / notation. Kung ang dalawang halaga ay tinukoy, ang isang elliptical na hangganan ay iguguhit sa lahat ng apat na sulok. -webkit-border-radius: 40px 10px; ay katumbas ng border-radius: 40px/10px; .	Buong suporta ng Chrome 4	Buong suporta ng Firefox 3.5	IE Buong suporta Oo	Firefox Buong suporta Oo	Bago ang Safari 4.1, hindi sinusuportahan ang slash / notation. Kung ang dalawang halaga ay tinukoy, ang isang elliptical na hangganan ay iguguhit sa lahat ng apat na sulok. -webkit-border-radius: 40px 10px; ay katumbas ng border-radius: 40px/10px; .	WebView Android?	Safari Buong suporta 5	Edge Mobile Buong suporta Oo	Firefox Android Buong suporta Oo	Chrome Android Buong suporta Oo	Safari iOS?
border-radius: 40px;	Elliptical na mga hangganan Mga Tala Firefox Android Buong suporta Oo Mga Tala Mga Tala Opera Android Walang suporta No	Bago ang Chrome 4, hindi sinusuportahan ang slash / notation. Kung ang dalawang halaga ay tinukoy, ang isang elliptical na hangganan ay iguguhit sa lahat ng apat na sulok. -webkit-border-radius: 40px 10px; ay katumbas ng border-radius: 40px/10px; .	Ang mga halaga ay hindi suportado sa mas lumang mga bersyon ng Chrome at Safari (ito ay naayos noong Setyembre 2010).

Firefox

Alamat Buong suporta Buong suporta Walang suporta Walang suporta Hindi alam ang compatibility Hindi alam ang pagiging tugma Tingnan ang mga tala sa pagpapatupad. Tingnan ang mga tala sa pagpapatupad.

Nangangailangan ng prefix ng vendor o ibang pangalan para magamit.

• Tingnan din

Mga katangian ng CSS na nauugnay sa hangganan-radius:

Mga katangian ng CSS

Kahulugan at Aplikasyon

Binibigyang-daan ka ng border-radius CSS property na tukuyin ang hugis ng mga hangganan ng isang elemento. Ang property na ito ay shorthand para sa sumusunod na apat na property: Ang fillet radius ay inilapat sa buong background, o larawan sa background tinukoy ng background na katangian (kahit na ang elemento ay walang mga hangganan). Eksaktong lokasyon

1. Ang clipping ay tinutukoy at itinakda ng halaga ng background-clip property. Walang pag-ikot ng mga sulok.
2. Ang default na halaga ay 0 (zero). ayon sa uri ng arko ng isang bilog). Ang /-th value (mula isa hanggang apat) ay tinukoy sa mga unit ng CSS (px, em, cm, atbp.) at tinutukoy r adius (radius) ng rounding. Ang mga halaga para sa bawat radius ay tinukoy sa sumusunod na pagkakasunud-sunod: kaliwa sa itaas(kaliwang sulok sa itaas), kanang itaas(kanang sulok sa itaas), ibabang kanan(kanang sulok sa ibaba), ibaba-kaliwa(kaliwa sa ibaba). Kung ibaba-kaliwa(kaliwa sa ibaba) ay tinanggal, pagkatapos ito ay kapareho ng kanang itaas(kanang sulok sa itaas). Kung ibabang kanan(sa kanang sulok sa ibaba) ay tinanggal, pagkatapos ito ay kapareho ng kaliwa sa itaas(kaliwang sulok sa itaas). Kung kanang itaas(itaas na kanang sulok) ay tinanggal, pagkatapos ito ay kapareho ng kaliwa sa itaas(kaliwang sulok sa itaas). Pinapayagan na ipahiwatig ang mga halaga bilang mga porsyento.
3. Ang default na halaga ay 0 (zero). parang ellipse arc). Ang mga halaga ay tinukoy sa mga yunit ng CSS (px, em, cm, atbp.). Ang pagkakasunud-sunod ng pagtukoy ng mga halaga ay ang mga sumusunod (ibabang larawan): ang halaga/s ay nakatakda (mula isa hanggang apat) h orisontal (pahalang) radius ng rounding, at ang value / ay itinakda sa pamamagitan ng slash (mula isa hanggang apat) v tuwid (vertical). Pinapayagan na ipahiwatig ang mga halaga bilang mga porsyento. Hindi pinapayagan ang mga negatibong halaga.

Suporta sa browser

Ari-arian			Opera		IExplorer	gilid
hangganan-radius	5.0 4.0 -webkit-	4.0 3.0 -moz-	10.5	5.0 3.1 -webkit-	9.0	12.0

CSS syntax:

hangganan-radius: "1-4 haba | 1-4% | 1-4 haba o 1-4% / 1-4 haba o 1-4% | inisyal | magmana"; /* Ang radius ay inilapat sa lahat ng apat na sulok (tulad ng isang pabilog na arko) */ border-radius : 15px; /* 1st value itaas-kaliwa at ibabang-kanan, pangalawang value itaas-kanan at ibaba-kaliwa */ border-radius : 15px 35%; /* 1st value sa itaas-kaliwa, pangalawang value sa itaas-kanan at sa ibaba-kaliwa, third value sa ibaba-kanan */ border-radius : 14px 18px 50%; /* 1st value sa itaas-kaliwa, pangalawa sa itaas-kanan, pangatlo sa ibaba-kanan, pang-apat sa ibaba-kaliwa */ border-radius : 22% 11px 14px 15px;
/ vertical radius - ang halaga ay nalalapat sa lahat ng apat na sulok */ border-radius : 15px 15% / 15px;/
/* pahalang na radius 1st value sa itaas-kaliwa at ibabang-kanan, pangalawang value sa itaas-kanan at ibabang-kaliwa vertical radius - 1st value sa itaas-kaliwa at ibabang-kanan, pangalawang value sa itaas-kanan at sa ibaba-kaliwa */ border-radius : 10px 15% / 10px 40px;/
/* pahalang na radius 1st value sa itaas-kaliwa, pangalawang value sa itaas-kanan at sa ibaba-kaliwa, pangatlong value sa ibaba-kanan vertical radius - 1st value sa itaas-kaliwa, pangalawang value sa itaas-kanan at sa ibaba-kaliwa, third value sa ibaba-kanan */ border-radius : 15px 15% / 15px;/
border-radius : 20px 15px 6em / 20px 25px 30%; vertical radius - 1st value sa itaas-kaliwa, pangalawa sa itaas-kanan, pangatlo sa ibaba-kanan, pang-apat sa ibaba-kaliwa */

border-radius : 15px 15% / 10px 15em 15px 5em;

JavaScript syntax:

Object.style.borderRadius = "5px"

Mga halaga ng ari-arian

bersyon ng CSS

CSS3

Nagmana

Hindi.

Animable

Halimbawa ng paggamit

class = "orange" > 50px

50px 25%

25px 75% / 4em