Граница-радијус - ЦСС-трикови

Било којем елементу можете дати „заобљене углове“ применом border-radiusпролазног ЦСС-а. Приметићете само ако је реч о промени боје. На пример, ако елемент има боју позадине или обруб који се разликује од елемента којим је завршен. Једноставни примери:

#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )

Заиста више није потребно, али за апсолутно најбољу могућу подршку прегледача можете додати -webkit-и -moz-:

.round ( /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; )

Обратите пажњу на редослед тих својстава: префикси добављача су наведени први, а верзија без спецификација „спецификација“ наведена је последња. Ово је исправан начин. Радијус границе је посебно добар пример зашто то радимо тако. У мало компликованијој верзији коришћења border-radius(где се преносе две вредности уместо једне), старији -webkit-префикс продавца учинио би нешто потпуно другачије од верзије „спец“. Дакле, ако слепо копирамо / залепимо исте вредности у сва три својства, могли бисмо видети различите резултате у унакрсном претраживачу. Сазнајте више о овом сценарију. За дуготрајну доследност, најбоље је да последњу листу наведете „спецификациону“ верзију.

Данас је прилично реално испуштати префиксе и само користити радијус обруба, као што је овде дискутовано.

Ако елемент има позадину слике, природно ће бити исечен у заобљеном углу:

#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )

Понекад можете видети background-color„цурење“ ван границе када border-radiusје присутно. (види). Да бисте то спречили користите позадину-исечак:

.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )

Са само једном вредношћу, border-radiusисто ће бити на сва четири угла елемента. Али то не мора бити случај. Сваки угао можете посебно одредити ако желите:

.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )

Такође можете навести две или три вредности. МДН то добро објашњава:

Ако је постављена једна вредност, овај радијус се односи на сва 4 угла .
Ако су постављене две вредности, прва се односи на top-leftи bottom-rightцорнер, друга се односи на top-rightи bottom-leftцорнер.
Четири вредности важе за top-left, top-right, bottom-right, bottom-leftугао у том циљу.
Три вредности: Друга вредност се односи на top-rightи такође bottom-left.

#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )

Такође можете одредити радијусе у којима је заобљен угао. Другим речима, заокруживање не мора бити савршено кружно, може бити и елиптично. То се ради помоћу косе црте („/”) између две вредности.

#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )

Напомена: Фирефок подржава елиптичне ивице само у верзијама 3.5+ и старијим ВебКит (нпр. Сафари 4) погрешно третира „40пк 10пк“ као и „40пк / 10пк“.

Можете одредити вредност border-radiusу процентима. Ово је посебно корисно када желите да направите облик круга или елипсе, али се може користити било када када желите да радијус обруба буде директно повезан са ширином елемената.

#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )

Напомена: У Сафари-ју проценат вредности за радијус обруба подржани су само у верзији 5.1+. У Опери, подржано само у верзији 11.5+.

Ево сваког појединачног својства са префиксима добављача:

.round ( -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; )

Напомена: Свака од тих вредности такође може имати вредност одвојену размаком, попут „5пк 10пк“, која се понаша као вредност одвојена косим цртама у скраћеници (хоризонтални радијус (размак) вертикални радијус).

Ресурси

Брза алатка за генерисање кода радијуса границе
Мозилла Доцс
У потрази за савршеним радијусом
Да ли више треба да додамо префикс бордер-радиус?

Ево мале ствари за поигравање различитим својствима и вредностима:

Погледајте оловку Алл тхе бордер-радиус 'Цхрис Цоииер-а (@цхрисцоииер) на ЦодеПен-у.

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.