. Но таким же образом можно скруглять и table, img, iframe . Чтобы скруглить края у этих элементов нужно всего лишь в стилях CSS элемента прописать border-radius .

Браузеры
Старые браузеры могут не поддерживать свойство border-radius . Так, IE ниже 9 версии, Firefox ниже 4 не отображают закругления. Необходимо прописывать вендорные префиксы CSS :

-webkit-border-radius :5px ; -moz-border-radius :5px ; border-radius :5px ;

Свойство border radius CSS используется для закругления углов элемента. Это сокращенная версия свойств: border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius .

Оно может принимать от одного до четырех значений или восемь значений, разделенных косой чертой «/» , с одним — четырьмя значениями с каждой стороны от косой черты.

1. Если косая черта не указана, то свойство может принимать одно, два, три или четыре значения.

border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?; // "?" указывать данное значение необязательно

• Если задано четыре значения, то они определяют радиусы каждого из четырех углов. То есть первое значение будет указывать x и y радиуса верхнего левого угла, таким образом, это будет круговая кривая. Второе значение задает радиусы для верхнего правого угла, третье — определяет радиусы нижнего правого угла, а четвертое — нижнего левого;
• Если задано три значения, первое устанавливает радиус верхнего левого угла, второе — радиус верхнего правого и левого нижнего углов, а третье — нижнего правого угла;
• Если задано два значения CSS table border radius , первое определяет радиусы левого верхнего и правого нижнего углов, а второе — радиусы верхнего правого и нижнего левого углов;
• Если задано одно значение, то оно задает одинаковые радиусы четырех углов.

Например:

border-radius: 1em 3em 2em;

эквивалентно:

border-top-left-radius: 1em; border-top-right-radius: 3em; border-bottom-right-radius: 2em; border-bottom-left-radius: 3em;

В каждом из перечисленных выше случаев, когда не используется косая черта, четыре угла элемента будут закруглены, а их кривизна будет идеальным кругом:

Два одинаковых радиуса для каждого угла дают круговую кривую. Каждый угол в этом примере имеет горизонтальный и вертикальный радиус 50 пикселей.

1. Если косая черта указана, то свойство может принимать до восьми значений — от одного до четырех значений с каждой стороны от косой черты.

Значения, указанные перед косой чертой, задают горизонтальный радиус углов. Значения, указанные после косой черты, задают вертикальный радиус соответствующих углов.

Например:

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;

В этом случае применения border radius CSS углы элемента будут закруглены, и их кривизна будет эллиптической:

Два неодинаковых радиуса для каждого угла дают эллиптическую кривизну. Каждый угол в этом примере имеет горизонтальный радиус 100 пикселей и вертикальный радиус 50 пикселей.

Общая информация и примечания

Если элемент использует фоновый цвет или изображение, фон также будет обрезаться указанным радиусом границы:

Фоновое изображение элемента обрезается в соответствии с указанным радиусом границы.

Но иногда цвет фона элемента может «просачиваться » за пределы границы, когда она закруглена. Чтобы исправить это, можно использовать свойство background-clip и установить для него значение padding-box .

Element { border-radius: 30px; background-clip: padding-box; }

Если у элемента есть границы изображения, то они не подрезается кривой закругленных углов.

Содержимое элемента может выходить за его границы в углах, которые были закруглены, если для элемента не установлено значение отступа, достаточное, чтобы сместить содержимое внутрь:

Содержимое элемента может выходить за закругленную границу, если для элемента не заданы отступы.

В этом примере moz border radius CSS добавлены отступы, чтобы содержимое не выходило за закругленные углы границы. Обратите внимание, что сама граница не отображается, но фон все равно будет иметь закругленные углы.

Element { background: black; color: white; border-radius: 1em; padding: 1em; }

Кроме этого область вне кривой границы не принимает pointer events , связанные с данным элементом.

Также кривые углов не должны пересекаться: когда сумма радиусов любых двух соседних границ превышает размер блока, браузеры должны пропорционально уменьшить используемые значения всех радиусов границ, чтобы ни один из них не перекрывался.

Процентные значения идеально подходят для создания круглых или эллиптических форм. Использование border radius CSS: 50% дает полностью круглую форму элемента, у которого высота и ширина равны:

Элемент с одинаковой высотой, шириной и значением радиуса границы 50%.

Если высота и ширина элемента не равны, мы получим эллиптическую форму:

Элемент с радиусом границы 50%, высота и ширина которого не равны.

Официальный синтаксис

Синтаксис:

border-radius: [<длина> | <проценты>] {1,4} {1,4}]?

Начальное значение: 0 0 0 0, оно задает начальное значения каждого из отдельных свойств.

Применяется: ко всем элементам. Но браузеры не обязательно должны применять его к элементам table и inline-table , когда для свойства border-collapse задано значение collapse . На данный момент поведение внутренних элементов таблицы не определено.

Анимируется: Каждое из полных свойств анимируется, как два значения длины, процентных значения или значения calc() . Когда оба значения являются длинами, они интерполируются как длины. Когда оба значения являются процентами, они интерполируются в процентах. Иначе оба значения преобразуются свойством calc() .

Значения

Неофициальный синтаксис webkit border radius CSS :

border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?;

border-radius: [верхний левый горизонтальный радиус] [верхний правый горизонтальный радиус]? [нижний правый горизонтальный радиус]? [нижний левый горизонтальный радиус]? / [верхний левый вертикальный радиус] [верхний правый вертикальный радиус]? [нижний правый вертикальный радиус]? [нижний левый вертикальный радиус]?

В обоих случаях вопросительный знак (?) означает, что значение является необязательным. Если значение опущено, браузер определяет его, как описано выше.

Каждый радиус может задаваться процентами или значением длины. Процентное соотношение для горизонтального радиуса относится к ширине блока, тогда как процентное соотношение для вертикального радиуса относится к высоте блока. Отрицательные значения не допускаются.

border-radius: 50%; border-radius: 30px 20px 40px; border-radius: 1em 2em; border-radius: 3em / 2em 4em; border-radius: 1em 2em 1em 3em / 2em 3em;

Демо-версия

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Краткая информация

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

×

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через косую черту (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчёт ведётся относительно ширины блока.

В случае задания двух параметров через косую черту, то первый параметр задаёт радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скруглённым уголком и эллиптическим уголком.

Рис. 1. Радиус скругления для создания разных типов уголков

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

div { background: #e4efc7; border: 1px solid #333; padding: 10px; border-radius: 0 ; }

Пример

Resulta halimbawang ito ipinapakita sa Fig. 2.

kanin. 2. Rounding radii

Modelo ng bagay

Bagay.style.borderRadius

Tandaan

Ginagamit ng Chrome bago ang bersyon 4.0, Safari bago ang bersyon 5.0, at ang Android bago ang bersyon 2.1 ang -webkit-border-radius property.

Ginagamit ng Firefox bago ang bersyon 4.0 ang -moz-border-radius property.

Pagtutukoy

Ang bawat detalye ay dumadaan sa ilang yugto ng pag-apruba.

• Rekomendasyon - Ang detalye ay naaprubahan ng W3C at inirerekomenda bilang isang pamantayan.
• Rekomendasyon ng Kandidato ( Posibleng rekomendasyon ) - ang grupong responsable para sa pamantayan ay nasisiyahan na ito ay nakakatugon sa mga layunin nito, ngunit nangangailangan ng tulong mula sa development community para ipatupad ang pamantayan.
• Iminungkahing Rekomendasyon Iminungkahing Rekomendasyon) - sa yugtong ito ang dokumento ay isinumite sa W3C Advisory Council para sa huling pag-apruba.
• Working Draft - Isang mas mature na bersyon ng draft na tinalakay at binago para sa pagsusuri ng komunidad.
• draft ng editor ( Editoryal na draft) - isang draft na bersyon ng pamantayan pagkatapos ng mga pagbabago na ginawa ng mga editor ng proyekto.
• Draft ( Pagtutukoy ng draft) - ang unang draft na bersyon ng pamantayan.

×

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

Tiyak na pamilyar ka na sa pamantayan gamit ang hangganan mga katangian:

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 tiyak na halaga para sa pag-aari ng lapad ng hangganan, 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 naming alisin ang mga espesyal na prefix at paggamit karaniwang anyo hangganan-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

Maraming mga taga-disenyo ang may lahat ng kaalaman sa larangan css properties hangganan, doon nagtatapos. 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

Mayroong maraming mga pamamaraan para sa paglikha ng mga disenyo gamit mga kumplikadong istruktura 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 para sa paglikha ng double border ay ang paggamit ng outline property.

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

Ang pamamaraang ito ay mahusay na gumagana, 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 kahit man lang, 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 epektong ito 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 natatanging mga hugis mga 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; )

Karamihan karaniwang halimbawa gamit ang CSS mga form - paglikha ng isang dumadaloy na arrow. Ang sikreto ng arrow na ito ay nasa paglikha ng hangganan na may iba't ibang kulay para sa bawat panig. Pagkatapos, itakda ang mga katangian ng lapad at taas sa 0.

Mag-assign tayo sa div block klase ng arrow:

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 nilikha namin ito hugis ng CSS, hindi namin maaaring partikular na ipahiwatig 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, para 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 ilan 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

*/ .speech-bubble ( position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; border- radius: 10px; font-family: sans-serif; .speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px solid; ) /* Iposisyon ang Arrow */ . speech-bubble-top:after ( border-bottom-color: #292929; left: 50%; bottom: 100%; margin-left: -15px; ) .speech-bubble-right:after ( border-left-color : #292929; kaliwa: 100%; margin-top: -15px; ) .speech-bubble-left:after ( border-right-color: #292929; top: 50%; right: 100%; margin-top: -15px; )

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 itatakda ang display property sa talahanayan, at ilagay ang lahat ng teksto sa isang talata. Ito ang hitsura nito sa html markup: