Kornizat dhe kufijtë. Kufiri i dyfishtë duke përdorur CSS

Vlad Merzheviç

Me CSS, ju mund të shtoni një kufi në një element në disa mënyra. Në thelb, natyrisht, prona kufitare përdoret, si më e gjithanshme, si dhe skicimi dhe, çuditërisht, kuti-hije , detyra kryesore e së cilës është krijimi i një hije. Le të hedhim një vështrim në këto metoda dhe dallimet e tyre.

përshkruajë pronën

Vetia më e thjeshtë për krijimin e kornizave. Ka të njëjtat parametra si kufiri, por ndryshon ndjeshëm prej tij në disa detaje:

• skica është tërhequr rreth elementit (kufiri brenda);
• skica nuk ndikon në madhësinë e elementit (kufiri i shtohet gjerësisë dhe lartësisë së elementit);
• skica mund të vendoset vetëm rreth të gjithë elementit, jo në anët individuale (kufiri mund të përdoret në çdo anë ose të gjitha menjëherë);
• skica nuk ndikohet nga rrezja e rrumbullakosjes së specifikuar nga vetia kufi-radius (ajo ndikon në kufi).

Shtrohet pyetja - në cilat raste nevojitet skica, kur rolin e saj, pavarësisht dallimeve të listuara, e merr tërësisht kufiri? Nuk ka shumë situata, por ato ndodhin:

• krijimi i kornizave komplekse me shumë ngjyra;
• shtimi i një kornize në një element kur rri pezull mbi të me kursorin e miut;
• Fshehja e kornizës së shtuar automatikisht nga shfletuesi për disa elementë kur merr fokusin;
• për skicë, mund të caktoni distancën nga skaji i një elementi në kufi duke përdorur veçorinë outline-offset, për të krijuar një .

Korniza me shumë ngjyra

Duhet të kuptohet se skica në asnjë mënyrë nuk zëvendëson kufirin dhe mund të ekzistojë me të, siç tregohet në shembullin 1.

Shembulli 1: Krijo një kornizë

Në këtë shembull, rreth elementit shtohet një kufi i zi, i cili ndahet nga sfondi me një kufi të bardhë (Fig. 1).

Oriz. 1. Kufiri rreth elementit

Korniza kur përdoret: rri pezull

Shtimi i një kufiri përtej kufirit rrit gjerësinë e elementit, gjë që është mjaft e dukshme kur kombinohet kufiri dhe pseudo-klasa :hover. Ka dy mënyra për të "fituar". Më e thjeshta është zëvendësimi i kufirit me një skicë, e cila e dimë se nuk ka asnjë efekt në madhësinë e elementit (shembulli 2).

Shembulli 2: Kornizë në lëvizje

skica nuk është gjithmonë e përshtatshme, vetëm sepse nuk ndikohet nga qoshet e rrumbullakosura. Metoda e dytë është e përshtatshme këtu - shtoni një kufi të padukshëm ose një kufi që përputhet me ngjyrën e sfondit dhe më pas ndryshoni parametrat e tij kur rri pezull (shembulli 3). Atëherë nuk do të ndodhë asnjë zhvendosje e elementit, pasi korniza është tashmë aty fillimisht. Por gjithmonë mbani mend se gjerësia e elementit është shuma e vlerave të gjerësisë, kufirit në të majtë dhe kufirit në të djathtë. E njëjta gjë është e vërtetë me lartësinë.

Shembulli 3: Korniza në rri pezull

Kufiri rreth fushave të formës

Në disa shfletues (Chrome, Safari, versionet e fundit të Opera), një kufi i vogël me ngjyra shfaqet rreth fushave të formularit kur ato marrin fokusin (Fig. 2). Për ta hequr atë, mjafton të shtoni vlerën none në vetinë e skicës në stile, siç tregohet në shembullin 4.

Oriz. 2. Kornizë rreth fushave

Shembulli 4. Hiqni kornizën

Korniza përmes hijes së kutisë

Edhe pse vetia box-shadow synon të shtojë një hije rreth një elementi, ajo mund të përdoret gjithashtu për të krijuar kufij, dhe ato që nuk mund të bëhen me kufi ose skicë . Kjo për faktin se numri i hijeve mund të jetë i pakufizuar, parametrat e të cilave renditen të ndara me presje.

Për të marrë një kornizë, tre parametrat e parë duhet të vendosen në zero, ata janë përgjegjës për pozicionin e hijes dhe turbullimin e saj. Parametri i katërt në këtë rast është përgjegjës për trashësinë e kufirit, dhe i pesti përcakton ngjyrën e kornizës. Për kornizën e dytë, parametri i katërt është i barabartë me shumën e trashësisë së dy kornizave.

Shembulli 4 tregon se si të shtoni dy kuti dhe një kufi në të djathtë duke përdorur një veti të vetme hije kuti.

Shembulli 4: Përdorimi i hijes së kutisë

Rezultati i këtij shembulli është paraqitur në Fig. 3.

Oriz. 3. Kornizat e krijuara nga vetia box-shadow

Vetia e kufirit CSS rregullohet për të krijuar kufirin e një objekti, domethënë për trashësinë e kufirit, për ngjyrën dhe stilin e tij. Kjo veçori përdoret gjerësisht në HTML. Ju mund të krijoni efekte të ndryshme për një perceptim më të mirë të përmbajtjes në faqe. Për shembull, dizajnoni një shirit anësor, kokën e faqes, menunë, etj.

1. Sintaksa e kufirit CSS

kufiri: kufiri me gjerësi kufiri në stilin e kufirit me ngjyrë | trashëgojnë;

• border-width - gjerësia e kufirit. Mund ta vendosni në piksel (px) ose të përdorni vlerat standarde të hollë, të mesme, të trashë (ato ndryshojnë vetëm në gjerësinë e pikselit)
• border-style - stili i kornizës së dhënë. Mund të marrë vlerat e mëposhtme
  • asnjë ose i fshehur - anulon kufirin
  • me pika - kornizë me pika
  • dash - kornizë dash
  • vijë e fortë - e thjeshtë (përdoret më shpesh)
  • kornizë e dyfishtë - dyfish
  • groove - kufiri 3D me brazdë
  • kurriz , futje , fillim - efekte të ndryshme të kornizës 3D
  • trashëgoj - aplikohet vlera e elementit mëmë
• border-color - ngjyra e kufirit. Mund të specifikohet duke përdorur një emër specifik ngjyrash ose në formatin RGB (shih emrat e ngjyrave html për sitin)

shënim

Vlerat në pronën e kufirit CSS mund të vendosen në çdo mënyrë. Sekuenca më e përdorur është "ngjyra e stilit të trashësisë".

2. Shembuj me kufij të ndryshëm të kufirit CSS

2.1. Shembull. Stilet e ndryshme të kufirit të stilit kufitar

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

При наведении курсора мыши на блок цвет рамки изменится

Вот как это выглядит на странице:

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

3. Толщина границы: свойство border-width

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width : thin | medium | thick | значение ;

• thin - тонкая толщина линии
• medium - средняя толщина линии
• thick - толстая толщина линии

Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

Вот как это выглядит на странице:

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

• border-top - для задания рамки сверху (верхняя граница)
• border-bottom - для задания рамки снизу (нижняя граница)
• border-right - для задания рамки справа (правая граница)
• border-left - для задания рамки слева (левая граница)

Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

Также есть свойства

• border-top-color - задание цвета верхний границы
• border-top-style - задание стиля верхней границы
• border-top-width - задание толщины верхней границы
• и т.д. для каждого направления

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

/* Описание двух одинаковых стилей: */

4.1. Пример. Красивая рамка для выделения цитат

Пример рамки для цитаты

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

Вот как это выглядит на странице:

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

7. Вдавленная линия CSS

Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

---

Вот как это выглядит на странице:

Для обращения к border из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.border ="VALUE "

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как оформлять текст в CSS. В данной статье я бы хотел рассказать, что такое рамки в CSS и как их использовать. Правила, отвечающие за рамку состоят из трех элементов: толщина рамки, стиль и цвет. Давайте создадим файл index.html со следующим содержимым:

На этой же странице зададим стили для блока с id = tester (внутри заголовка страницы добавим следующие строки):

Vetia e gjerësisë së kufirit është përgjegjëse për gjerësinë e kornizës, vetia e stilit kufitar është përgjegjëse për stilin e kornizës dhe ngjyra e kufirit është ngjyra e kornizës. Gjithçka është e qartë me pronat e para dhe të treta. Të gjitha vlerat që mund të marrë vetia e stilit kufitar tregohen në figurën më poshtë:

Nëse tani hapim faqen tonë në shfletues, do të shohim që një kufi i kuq i ngurtë 1 px i gjerë është shfaqur rreth bllokut.

Unë ju tregova hyrjen e gjatë të kufirit CSS (kjo hyrje është shumë e rëndë dhe zakonisht askush nuk e përdor atë). Të gjitha udhëzimet mund të vendosen në një rresht. Në rastin tonë, do të duket kështu:

Kufiri: 1px e kuqe e fortë;

ato. Së pari ne specifikojmë trashësinë e kornizës, më pas specifikojmë stilin dhe ngjyrën e kornizës.

Ju ndoshta keni vënë re se korniza u shfaq në të katër anët. Kornizat mund të vendosen për secilën nga anët veç e veç (do të jetë e qartë në një shembull specifik):

Border-top: 2px e kuqe e fortë; kufiri-fund: 3px jeshile me pika; kufiri-majtas: 6px e verdhë e ndërprerë; kufiri-djathtas: 5px double #fe54e5;

Ju mund të shihni se të 4 anët kanë korniza të ndryshme. Nëse për ndonjë anë nuk vendosni një kornizë, atëherë atje, në përputhje me rrethanat, nuk do të ketë kornizë.

Kornizat përdoren absolutisht kudo: është pothuajse e vështirë të gjesh një dizajn uebsajti që nuk përdor korniza. Shumë shpesh, artikujt e menysë ndahen nga një vijë vertikale, e cila vendoset vetëm nga vetia kufi-djathtas ose kufiri-majtas. Ju gjithashtu mund të bëni efekte interesante në lidhje. Vetëm në këtë temë detyra shtëpie:

Ju duhet të krijoni një faqe dhe të vendosni 2 lidhje në të. Stili i këtyre lidhjeve: një vijë e fortë, kur rri pezull mbi këtë linjë duhet të bëhet një vijë me pika.

Është gjithashtu shumë mirë të përdoren kufijtë për elementët kur shtroni faqen në mënyrë që të kuptoni më mirë se ku ndodhet cili element. Të paktën, është shumë më e qartë dhe më e kuptueshme për mua që të përpiloj.

Kjo veti krijon një kufi rreth një elementi. Mund të lexoni më shumë për këtë pronë në lidhjen, dhe në këtë artikull do të përshkruaj në terma të përgjithshëm se si funksionon. Ky informacion do të jetë i mjaftueshëm për të kuptuar se si të bëni kufij me CSS.

Sintaksa për vetinë e kufirit është e thjeshtë: kufiri: 1px e zezë solide; . Kjo pronë ka tre vlera:

• 1px - trashësia e kufirit.
• i ngurtë - lloji i kornizës, vija e ngurtë - e fortë, e dyfishtë - e ngurtë e dyfishtë, vija e ndërprerë - me pika. Ka disa lloje të tjera të kufijve, ju mund të gjeni informacion rreth tyre këtu: CSS border .
• e zezë - vendos ngjyrën e kufirit. Ngjyrat mund të vendosen me emër, vlerat e vlefshme janë këtu: tabela e ngjyrave CSS, ose me kod hex. Si ta bëni këtë është shkruar në artikullin: Ngjyrat në CSS.

Korniza e tekstit CSS

Këtu është një shembull i përdorimit të vetive kufitare për të krijuar një kufi me gjerësi një piksel dhe të zi:

Këtij paragrafi i është caktuar shembulli i klasës-1.

Në këtë shembull, ne kemi përdorur gjithashtu veçorinë CSS padding, ose padding. Kjo veçori cakton madhësinë e indentit nga teksti në goditje (kufiri i elementit).

Le të shohim një shembull tjetër të thjeshtë, vetëm për ta kuptuar. Le të krijojmë një kufi me gjerësi tre pikselësh, të kuq dhe pa mbushje (vetia e mbushjes CSS).

Këtij paragrafi i është dhënë shembulli i klasës-2.

Siç mund ta shohim, pa mbushje, korniza e tekstit duket me brirë.

Si të kornizoni një imazh në CSS

Kornizat e fotografive vendosen në të njëjtën mënyrë duke përdorur veçorinë kufi. Le të bëjmë një kufi të gjelbër 4 px për imazhin.

Shembull-img (kufi: 4px jeshile; )

Ja se si do të funksionojë ky kod:

Si të rrumbullakosni qoshet e kufirit në CSS

Rrumbullakimi i këndeve të kufirit në CSS bëhet me veçorinë border-radius. Kjo pronë u prezantua në CSS3 dhe funksionon në të gjithë shfletuesit modernë.

Vetia e rrezes kufitare mund të ketë një deri në katër vlera. Nëse vlera është një, atëherë vendos shkallën e rrumbullakimit për të gjitha qoshet. Le të japim një shembull se si do të funksionojë kjo pronë me një vlerë të vetme.

Shembulli-3 (kufi: 1px e zezë; rrezja e kufirit: 15px; mbushja: 10px; )

Ja se si funksionon:

Vetia e rrezes kufitare: 15 px.>

Nëse blloku nuk ka kufi, atëherë ekziston gjerësia e kufirit: 0; , atëherë zona e mbushur me ngjyrën e sfondit do të rrumbullakoset (vetia e ngjyrës së sfondit). Këtu është një shembull:

Shembull-4 ( gjerësia e kufirit: 0; // megjithëse kjo vlerë është 0 sipas parazgjedhjes së ngjyrës së sfondit: #DDD; rreze-kufi: 15 px; mbushje: 10 px; )

Ja se si funksionon ky shembull:

Vetia e rrezes kufitare: 15 px.>

Siç shkrova më herët, vetia e rrezes kufitare mund të vendoset nga një në katër vlera. Tabela më poshtë përshkruan se si do të funksionojnë të gjitha kombinimet e vlerave.

Për pronën e rrezes kufitare, vlerat mund të specifikohen si përqindje.

Le të vizatojmë një rreth në CSS. Për ta bërë këtë, merrni një bllok katror prej 100 me 100 pikselë dhe rrumbullakosni qoshet me rrezen e kufirit të rregullit CSS: 50% .

Shembull-5 (gjerësia: 100 pikselë; lartësia: 100 pikselë; ngjyra e sfondit: #F00; rreze-kufi: 50%; )

Ja se si funksionon ky shembull:

Në këtë temë "kornizat në CSS" është shpalosur plotësisht. Fat i mirë për të mësuar CSS!

Vetia e përgjithshme e kufirit përdoret për të kontrolluar kufirin e një elementi. Kjo veçori ju lejon të vendosni gjerësinë, stilin dhe ngjyrën e kufirit të një elementi në një deklaratë të vetme.

Këto tre veti (gjerësia, stili dhe ngjyra e kufirit) mund të vendosen në një deklaratë të vetme. Këtu është një shembull:

Ju mund të specifikoni një stil kufiri vetëm në njërën anë të një elementi. Për ta bërë këtë, përdorni veçoritë kufi-lartë (kufiri i sipërm), kufiri-djathtas (kufiri djathtas), kufiri-poshtë (kufiri i poshtëm), kufiri-majtas (kufiri majtas).

Në këtë shembull, secila anë e bllokut ka trashësinë, stilin dhe ngjyrën e saj të kufirit.

Konsideroni përdorimin e CSS për të krijuar një formë si kjo:

Vlerat e kufirit - trashësia, stili dhe ngjyra - mund të vendosen veçmas duke përdorur veçori të veçanta.

• border-style - stili i kufirit.
• border-width - gjerësia e kufirit.
• border-color - ngjyra e kufirit.

Le të shqyrtojmë secilën nga vlerat veç e veç.

Prona e stilit kufitar. Stili i kufirit.

Vetia e stilit kufitar përcakton stilin e kufirit. Në CSS, ndryshe nga HTML, kufiri i një elementi mund të jetë më shumë se thjesht i fortë. Vlerat e vlefshme për stilin e kufirit janë:

1. asnjë - pa kufi (i parazgjedhur).
2. kufi i fortë - solid.
3. kufiri i dyfishtë - dyfish.
4. kufiri i ndërprerë - me pika.
5. me pika - një kufi i përbërë nga një seri pikash.
6. kurriz - kufi "kresht".
7. groove - kufi "groove".
8. inset - kufi i futur.
9. fillim - kufi i ekstruduar.

Shembuj se si duken.

pa kufi (asnjë)

kufi i fortë (i ngurtë)

kufi i dyfishtë (i dyfishtë)

kufi me pika (me pika)

kufiri me pika (i ndërprerë)

kufiri i brazdës (groove)

kufiri i kreshtës

kufiri i futur (futur)

kufiri i ekstruduar (fillimi)

Nga rruga, nëse vendosni ngjyrën e kufirit në të zezë për kornizën e kreshtës, do të merrni rezultatin e mëposhtëm.

Një bllok div me një kufi të zi dhe stil kreshtë.

Kufiri duket si i fortë, por kjo ndodh sepse stili i kreshtës krijohet duke shtuar një efekt hije të zezë dhe efekti i zi në kufirin e zi nuk është i dukshëm.

Me ndihmën e veçorisë së stilit kufitar, stili i kufirit mund të vendoset jo vetëm për të gjitha anët e bllokut. Është e mundur të vendosni vlera të shumta për të njëjtën pronë në stil kufiri, në varësi të numrit të vlerave, stili i kufirit do t'i caktohet një numri të ndryshëm anash të bllokut. Mund të vendosni një, dy, tre ose katër vlera. Le të shohim shembuj për secilin rast.

Një vlerë (e ngurtë) - stili i kufirit është vendosur për të gjitha anët e bllokut.

Dy vlera (të dyfishta të ngurta) - vlera e parë vendos stilin për anët e sipërme dhe të poshtme, e dyta për anën.

Tre vlera (të ngurta me dy pika) - vlera e parë për anën e sipërme, e dyta për anët, e treta për pjesën e poshtme.

Katër vlera (të ngurta të dyfishta me pika) - secila vlerë për njërën anë në drejtim të akrepave të orës nga lart.

Prona me gjerësi kufiri. Trashësia e kufirit.

Vetia border-width përdoret për të vendosur gjerësinë e kufirit të një elementi. Trashësia e kufirit mund të specifikohet në çdo njësi matëse absolute, siç janë pikselët.

Ashtu si vetia e stilit kufitar, vetia mund të vendoset gjithashtu në një deri në katër vlera. Konsideroni shembuj për secilin rast.

Shembull i kodit:

Ekzistojnë gjithashtu vlera të fjalëve kyçe për veçorinë me gjerësi kufiri. Janë tre në total:

• kufiri i hollë - i hollë;
• trashësi mesatare - mesatare;
• kufi i trashë - i trashë;

Trashësia e kufirit: e hollë.

Trashësia e kufirit: e mesme.

Trashësia e kufirit: e trashë.

Prona me ngjyrë kufiri. Ngjyra e kufirit.

Lehtësia e ngjyrës së kufirit përdoret për të kontrolluar ngjyrën e kufirit. Ngjyrat për këtë veti mund të vendosen duke përdorur ndonjë nga metodat e përshkruara në artikullin Ngjyrat në CSS, përkatësisht:

• Shënimi heksadecimal (#ff00aa) i ngjyrës.
• Formati RGB është rgb (255,12,110). Formati RGBA për CSS3.
• Formatet HSL dhe HSLA për CSS3.
• Emri i ngjyrës, për shembull e zezë (e zezë). Për një listë të plotë të emrave të ngjyrave, shihni tabelën Emrat e ngjyrave CSS.

Vetia me ngjyrë kufiri mund të ketë gjithashtu një deri në katër vlera dhe i trajton ato në mënyrë të ngjashme me vetitë e mëparshme.

Një vlerë (e kuqe).

Dy vlera (e kuqe e zezë).

Tre vlera (e kuqe e zezë e verdhë).

Katër vlera (e kuqe e zezë e verdhë blu).

Tani le të kthehemi në detyrën e shprehur më lart dhe të vizatojmë një figurë:

Këtu është kodi që vizaton një formë të tillë, vetëm më e madhe:

Vendosja e vlerave për anët veç e veç

Siç u përmend më lart, ju mund të specifikoni vetëm vlerat e pronës kufitare për njërën anë të një kutie. Për këto qëllime, ekzistojnë prona:

• kufiri i sipërm (kufiri i sipërm)
• kufiri-djathtas (kufiri i djathtë)
• kufiri-fund (kufiri i poshtëm)
• kufiri-majtë (kufiri i majtë)

Më lejoni t'ju kujtoj se për të gjitha pronat, tre vlera janë të specifikuara (trashësia, stili dhe ngjyra) në çdo mënyrë. Por ka veti që ju lejojnë të vendosni trashësinë, ngjyrën dhe stilin për secilën anë veç e veç. Shkrimi i këtyre vetive rrjedh nga sa më sipër.

Opsionet e kufirit të sipërm (border-lart ).

• border-top-color - vendos ngjyrën e kufirit të sipërm të një elementi.
• border-top-width - vendos gjerësinë e kufirit të sipërm të një elementi.
• border-top-style - vendos stilin e kufirit të sipërm të elementit.

Opsionet e kufirit të djathtë (kufi-djathtas).

• border-right-color - vendos ngjyrën e kufirit të djathtë të elementit.
• border-right-width - vendos gjerësinë e kufirit të djathtë të elementit.
• border-right-style - vendos stilin e kufirit të djathtë të elementit.

Opsionet e kufirit të poshtëm (border-bottom ).

• border-bottom-color - vendos ngjyrën e kufirit të poshtëm të një elementi.
• border-bottom-width - vendos gjerësinë e kufirit të poshtëm të një elementi.
• border-bottom-style - vendos stilin e kufirit të poshtëm të një elementi.

Opsionet e kufirit të majtë (kufitar-majtas).

• border-left-color - vendos ngjyrën e kufirit të majtë të elementit.
• border-left-width - vendos gjerësinë e kufirit të majtë të elementit.
• border-left-style - vendos stilin e kufirit të majtë të elementit.

Një shembull i përdorimit të këtyre vetive:

Prona e rrezes kufitare. Rrumbullakimi i qosheve të kufirit.

Vetia border-radius është për rrumbullakimin e qosheve të kufijve të një elementi. Kjo veçori u prezantua në CSS3 dhe funksionon saktë në të gjithë shfletuesit modernë, përveç Internet Explorer 8 (dhe versionet më të vjetra).

Vlerat mund të jenë çdo numër i përdorur në CSS.

kufiri i pronës: 15px.

Nëse korniza e bllokut nuk është vendosur, atëherë rrumbullakimi ndodh me sfondin. Këtu është një shembull i rrumbullakosjes së bllokut pa një kufi, por me një ngjyrë sfondi:

kufiri i pronës: 15px.

Ka veti për rrumbullakimin e çdo cepi individual të një elementi. Ky shembull i përdor të gjitha:

kufiri-lart-majtë-rrezja: 15px; kufiri-lart-djathtas-rreze: 0; kufiri-poshtë-djathtas-rreze: 15px; kufiri-poshtë-majtas-rreze: 0;

kufiri i pronës: 15px.

Edhe pse ky kod mund të shkruhet në një deklaratë: kufiri-radius : 15px 0 15px 0 . Fakti është se për pronën e rrezes kufitare, mund të vendosni nga një deri në katër vlera. Tabela e mëposhtme përmbledh rregullat që rregullojnë deklarata të tilla.

Duke studiuar me kujdes këtë tabelë, mund të kuptoni se hyrja më e shkurtër për stilin e dëshiruar do të jetë: border-radius : 15px 0 . Ka vetëm dy vlera.

Pak praktikë

Vizatoni një limon duke përdorur CSS.

Këtu është kodi për një bllok të tillë:

Marzhi: 0 auto; /* Qendër bllokun */ gjerësia: 200 px; lartësia: 200 px; sfond: #F5F240; kufiri: 1px solid #F0D900; kufiri-radius: 10px 150px 30px 150px;

Ne kemi vizatuar tashmë figurën:

Tani le të lëmë një trekëndësh prej tij:

Kodi i trekëndëshit është:

Marzhi: 0 auto; /* Qendër bllokun */ mbushje: 0px; gjerësia: 0 px lartësia: 0; kufiri: 30 px e bardhë; kufiri-fund-ngjyra: e kuqe;