Különféle szépségek teremtésére maga körül, és az első ilyen szépség a keret lesz.

Először nézzük meg a legegyszerűbb kereteket. Létrehozásukhoz a CSS a border tulajdonságot használja, amely a következő értékekre állítható be:

tömör - tömör keret;

szaggatott - pontozott keret;

pontozott - pontozott keret;

dupla – dupla vonalas keret;

horony - árnyékos keret;

gerinc - megkönnyebbüléssel;

Két további tulajdonság szükséges az egyszerű keretek létrehozásához

widtht - keret vastagsága;

szín - keret színe;

A rövidítési technika szerint az értékeket egy sorba írják, szóközzel elválasztva.

p(
keret : 2px tömör #ffff00 ;
}

padding - belső (a keret behúzása a tartalomból);

margó - külső (a keret behúzása a külső objektumoktól);

A behúzásokhoz útmutatás is adott (melyik oldalról kell visszavonulni). Ezeket a tulajdonságokat akkor használjuk, ha a tartalmat nem a keret közepén kell elhelyezni, vagy magát a keretet valamilyen eltolással kell elhelyezni.

top - behúzás felülről;

rightnt - behúzás jobbra;

alsó - alsó behúzás;

bal - bal behúzás

Ezeknek a tulajdonságoknak az értékeit egymás után röviden írjuk (kitöltés: 10px 30px 15px 20px ), és először a felső értéket állítjuk be, majd a többit az óramutató járásával megegyezően.

Ha csak egy értéket ad meg, az azt jelenti, hogy a behúzás minden oldalon azonos lesz.

p(
keret : 2px tömör #ffff00 ;

margó: 20 képpont;
}

Ha szöveget vagy képet szeretne elhelyezni a keret közepén, akkor hozzáadhatja a text-align: center tulajdonságot a "p" választóhoz;

Ezután fontolja meg, hogyan a magasság és keret szélessége. A keret magasságát a böngésző automatikusan állítja be, és a megadott behúzások figyelembevételével úgy választja meg, hogy a tartalom beleférjen. De mi magunk állítjuk be a szélességet.

A szélesség tulajdonság határozza meg, értéke pedig a kívánt méretet jelzi pixelben vagy más, a weben elfogadott hosszmértékben.

p(
keret : 2px tömör #ffff00 ;
padding : 10px 20px 10px 20px ;
margó: 20 képpont;
szélesség: 400 képpont
}

Egyébként ne feledje, hogy a szélesség beállításakor a böngésző ezt az értéket csak a tartalom szélességének tekinti. Ezután ehhez az értékhez hozzáadja a megadott margókat és szegélyvastagságot, és megjeleníti a végleges méretet az oldalon.

Utolsó teendő pedig a keret elhelyezése az oldalon. Ez a már meglévő margó tulajdonság használatával történik.

És ha csak a keretblokkot kell elhelyeznie az oldal közepén, akkor az automatikus érték hozzáadódik a margó tulajdonsághoz.

p(
keret : 2px tömör #ffff00 ;
padding : 10px 20px 10px 20px ;
margó : 20px auto ;
szélesség: 400 képpont
}

Az első példában hozzunk létre egy html dokumentumot, és hozzunk létre egy tömör keretet a törzsblokkhoz (dokumentumtörzs) és egy bekezdéshez.

A következő példákban csak a CSS (ami a stíluscímkébe van csomagolva) változik.

Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.

Результат:

Следующая рамка dashed (пунктир).

p{
text-indent : 30px ;
border : 2px dashed #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Результат:

Рамка dotted :

p {
text-indent : 30px ;
border : 3px dotted #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка double :

p {
text-indent : 30px ;
border : 5px double #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка groove :

p {
text-indent : 30px ;
border : 7px groove #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка ridge :

p {
text-indent : 30px ;
border : 10px ridge #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Для этого уберём border , и добавим border-radius и box-shadow .

p {
border-radius : 10px ;
box-shadow : 0 0 0 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Размоем внешний край рамки. Для этого в свойстве box-shadow , увеличим третью цифру.

p {
border-radius : 10px ;
box-shadow : 0 0 7px 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Сделаем разноцветную рамку. Для этого в свойство box-shadow , через запятую, добавим ещё несколько комплектов значений с разными цветами.

p {
border-radius : 10px ;

0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Можно сделать круг в рамке. Для этого зададим абзацу одинаковую высоту и ширину, то есть сделаем квадрат, изменим значение border-radius

p {
border-radius : 50%/50% ;
box-shadow : 0 0 0 3px #ff4f00 ,
0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
padding : 40px ;
margin : 20px auto ;
width : 130px ;
height : 130px ;
text-align : center;
}

Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:

Szegélystílust csak az elem egyik oldalán adhat meg. Ehhez használja a border-top (felső szegély), border-right (jobb szegély), border-bottom (alsó szegély), border-left (bal szegély) tulajdonságokat.

Ebben a példában a blokk minden oldalának saját szegélyvastagsága, stílusa és színe van.

Fontolja meg a CSS használatát egy ehhez hasonló alakzat létrehozásához:

A szegélyértékek - vastagság, stílus és szín - külön beállíthatók speciális tulajdonságokkal.

• border-style - a szegély stílusa.
• border-width – a szegély szélessége.
• border-color – a szegély színe.

Tekintsük az egyes értékeket külön-külön.

A border stílusú ingatlan. Szegély stílus.

A border stílusú tulajdonság beállítja a keret stílusát. A CSS-ben, a HTML-től eltérően, egy elem szegélye nem csak tömör lehet. A szegélystílus érvényes értékei:

1. nincs – nincs szegély (alapértelmezett).
2. tömör - tömör szegély.
3. kettős - kettős szegély.
4. szaggatott – pontozott szegély.
5. pontozott – pontok sorozatából álló szegély.
6. gerinc - "gerinc" szegély.
7. horony - szegély "barázda".
8. beillesztés – behúzott szegély.
9. eleje – extrudált szegély.

Példák arra, hogyan néznek ki.

nincs határ (nincs)

tömör szegély (szilárd)

dupla szegély (dupla)

pontozott szegély (pontozott)

pontozott szegély (szaggatott)

horonyszegély (horony)

gerincszegély

behúzott szegély (betét)

extrudált szegély (eleje)

Egyébként, ha a szegélyszínt feketére állítja a gerinckeretnél, akkor a következő eredményt kapja.

Fekete szegéllyel és ridge stílusú div.

A szegély tömörnek tűnik, de ez azért van így, mert a gerincstílus fekete árnyékhatás hozzáadásával jön létre, és a fekete szegélyen lévő fekete hatás nem látható.

A border-style tulajdonság segítségével a szegélystílus nem csak a blokk minden oldalára állítható be. Több értéket is beállíthat ugyanahhoz a szegélystílusú tulajdonsághoz, az értékek számától függően a szegélystílus a blokk különböző oldalaihoz lesz hozzárendelve. Beállíthat egy, kettő, három vagy négy értéket. Nézzünk példákat minden egyes esetre.

Egy érték (szilárd) - a szegélystílus a blokk minden oldalára be van állítva.

Két érték (szilárd dupla) - az első érték a felső és az alsó oldal stílusát állítja be, a második az oldalt.

Három érték (folytonos, dupla pontozott) - az első érték a felső oldalra, a második az oldalakra, a harmadik az alsóra.

Négy érték (folytonos, dupla pontozott szaggatott) - mindegyik érték az egyik oldalon az óramutató járásával megegyező irányban felülről.

A határszélességű tulajdonság. Szegély vastagsága.

A border-width tulajdonság az elem szegélyének szélességének beállítására szolgál. A szegély vastagsága bármilyen abszolút mértékegységben megadható, például pixelben.

A border stílusú tulajdonsághoz hasonlóan a tulajdonság is beállítható egy-négy értékre. Vegyünk példákat minden egyes esetre.

Példa kód:

Az űrlapon a border-width tulajdonsághoz is vannak értékek kulcsszavakat. Összesen három van:

• vékony - vékony szegély;
• közepes - közepes vastagságú;
• vastag - vastag szegély;

Szegély vastagság: vékony.

Szegélyvastagság: közepes.

Szegély vastagság: vastag.

A keretszín tulajdonság. Szegély színe.

A keretszín funkció a szegély színének szabályozására szolgál. A tulajdonság színei a Színek a CSS-ben című cikkben leírt módszerek bármelyikével beállíthatók, nevezetesen:

• A szín hexadecimális jelölése (#ff00aa ).
• Az RGB formátum rgb(255,12,110). RGBA formátum a CSS3-hoz.
• HSL és HSLA formátumok a CSS3-hoz.
• A szín neve, például fekete (fekete). A színnevek teljes listáját lásd a CSS színnevek táblázatában.

A keretszín tulajdonság egy-négy értéket is tartalmazhat, és az előző tulajdonságokhoz hasonlóan kezeli őket.

Egy érték (piros).

Két érték (piros fekete).

Három érték (piros fekete sárga).

Négy érték (piros fekete sárga kék).

Most térjünk vissza a fent hangoztatott feladathoz, és rajzoljunk egy ábrát:

Íme a kód, amely egy ilyen alakzatot rajzol, csak nagyobbat:

Az oldalak értékeinek beállítása külön

Ahogy fentebb említettük, a kerettulajdonságok értékeit csak a doboz egyik oldalán adhatja meg. E célokra a következő tulajdonságok állnak rendelkezésre:

• border-top (felső szegély)
• határ-jobb (jobb oldali szegély)
• border-bottom (alsó szegély)
• border-bal (bal szegély)

Hadd emlékeztesselek arra, hogy minden tulajdonságnál három érték van megadva (vastagság, stílus és szín), tetszőleges sorrendben. De vannak olyan tulajdonságok, amelyek lehetővé teszik a vastagság, a szín és a stílus beállítását mindkét oldalon külön-külön. Ezen tulajdonságok írása a fentiekből származik.

Felső szegély opciók (border-top ).

• border-top-color – egy elem felső szegélyének színét állítja be.
• border-top-width – egy elem felső szegélyének szélességét állítja be.
• border-top-style – beállítja az elem felső szegélyének stílusát.

Jobb szegély opciók (border-right ).

• border-right-color – az elem jobb oldali szegélyének színét állítja be.
• border-right-width – az elem jobb oldali szegélyének szélességét állítja be.
• border-right-style – beállítja az elem jobb oldali szegélyének stílusát.

Alsó szegély opciók (border-bottom ).

• border-bottom-color – egy elem alsó szegélyének színét állítja be.
• border-bottom-width – egy elem alsó szegélyének szélességét állítja be.
• border-bottom-style – beállítja az elem alsó szegélyének stílusát.

Bal oldali szegély opciók (border-left ).

• border-left-color – az elem bal oldali szegélyének színét állítja be.
• border-left-width – az elem bal oldali szegélyének szélességét állítja be.
• border-left-style – beállítja az elem bal oldali szegélyének stílusát.

Példa a tulajdonságok használatára:

A határsugár tulajdonság. A határ sarkainak lekerekítése.

A border-radius tulajdonság egy elem szegélyeinek sarkainak lekerekítésére szolgál. Ez a tulajdonság megjelent a CSS3-ban, és mindenben megfelelően működik modern böngészők, kivéve a internet böngésző 8 (és régebbi verziók).

Az értékek tetszőleges CSS-ben használt számok lehetnek.

ingatlan határ-sugár: 15px.

Ha a blokkkeret nincs beállítva, akkor a háttérrel együtt kerekítés történik. Íme egy példa a szegély nélküli, de háttérszínnel rendelkező blokkkerekítésre:

ingatlan határ-sugár: 15px.

Vannak tulajdonságok az elem minden egyes sarkának lekerekítésére. Ez a példa mindegyiket használja:

border-top-bal-sugár: 15px; határ-jobb felső-sugár: 0; szegély-jobb alsó-sugár: 15 képpont; határ-alul-bal-sugár: 0;

ingatlan határ-sugár: 15px.

Bár ez a kód egy deklarációban is felírható: border-radius : 15px 0 15px 0 . A helyzet az, hogy a border-radius tulajdonságnál egytől négyig állítható be az érték. Az alábbi táblázat összefoglalja az ilyen nyilatkozatokra vonatkozó szabályokat.

Miután gondosan tanulmányozta ezt a táblázatot, megértheti, hogy a legrövidebb bejegyzés kívánt stílustígy lesz: border-radius : 15px 0 . Csak két érték van.

Egy kis gyakorlat

Rajzolj egy citromot CSS segítségével.

Íme egy ilyen blokk kódja:

Margó: 0 auto; /* A blokk középre helyezése */ szélesség: 200px; magasság: 200 képpont; háttér: #F5F240; keret: 1px tömör #F0D900; border-radius: 10px 150px 30px 150px;

Az ábrát már megrajzoltuk:

Most hagyjunk belőle egy háromszöget:

A háromszög kódja:

Margó: 0 auto; /* A blokk középre helyezése */ padding: 0px; szélesség: 0 képpont magasság: 0; szegély: 30 képpont tömör fehér; szegély-alsó szín: piros;

A CSS border tulajdonság igazodik egy objektum szegélyének létrehozásához, nevezetesen a szegély vastagságához, színéhez és stílusához. Ezt a tulajdonságot széles körben használják a HTML-ben. Különféle effektusokat hozhat létre az oldal tartalmának jobb észlelése érdekében. Például tervezzen oldalsávot, webhely fejlécet, menüt stb.

1. CSS határ szintaxis

határ: border-width border-style border-color | örököl;

• border-width – határszélesség. Beállíthatja pixelben (px), vagy használhatja a standard értékeket vékony, közepes, vastag (csak pixelszélességben különböznek)
• border-style – a renderelt keret stílusa. A következő értékeket veheti fel
  • nincs vagy rejtett – törli a határt
  • pontozott - pontozott keret
  • szaggatott - kötőjel keret
  • tömör - egyszerű vonal (leggyakrabban használt)
  • dupla - dupla keret
  • barázda – barázdált 3D szegély
  • ridge, inset, outset – különféle 3D kereteffektusok
  • inherit – a szülőelem értéke kerül alkalmazásra
• border-color – a szegély színe. segítségével beállítható konkrét név színekben vagy RGB formátumban (lásd az oldal html színneveit)

jegyzet

A CSS border tulajdonság értékei tetszőleges sorrendben beállíthatók. A leggyakrabban használt sorozat a "vastagság stílus színe".

2. Példák különböző CSS-szegélyekkel

2.1. Példa. Különböző szegély-stílusú szegélystílusok

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 можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой.

Свойство outline

Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:

• outline выводится вокруг элемента (border внутри);
• outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
• outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
• на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Возникает вопрос - в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:

• создание сложных разноцветных рамок;
• добавление рамки к элементу при наведении на него курсора мыши;
• сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
• для outline можно задать расстояние от края элемента до рамки с помощью свойства outline-offset , для создания .

Разноцветные рамки

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

Пример 1. Создание рамки

Ebben a példában egy fekete szegély kerül az elem köré, amelyet fehér keret választ el a háttértől (1. ábra).

Rizs. 1. Szegély az elem körül

Keret a:hover használatakor

Ha egy szegélyt adunk hozzá a szegélyhez, az megnöveli az elem szélességét, ami a border és a :hover pszeudoosztály kombinálásakor észrevehető. Kétféleképpen lehet "nyerni". A legegyszerűbb, ha a szegélyt körvonalra cseréljük, amiről tudjuk, hogy nincs hatással az elem méretére (2. példa).

2. példa: Keret lebegve

A körvonal nem mindig megfelelő, már csak azért is, mert nem befolyásolják a lekerekített sarkok. A második módszer alkalmas erre - adjon hozzá egy láthatatlan szegélyt vagy egy olyan szegélyt, amely megfelel a háttérszínnek, majd változtassa meg a paramétereit az egérmutatóval (3. példa). Ekkor az elem elmozdulása nem következik be, mivel a keret már kezdetben ott van. De mindig ne feledje, hogy az elem szélessége a szélesség, a bal oldali szegély és a jobb oldali szegély értékeinek összege. Ugyanez a helyzet a magassággal.

3. példa: Keret lebegve

Szegély az űrlapmezők körül

Egyes böngészők (Chrome, Safari, legújabb verziói Opera) az űrlapmezők körül, amikor fókuszt kapnak, egy kis színes keret jelenik meg (2. ábra). Eltávolításához elegendő a none értéket hozzáadni az outline tulajdonsághoz a stílusokban, ahogy a 4. példában látható.

Rizs. 2. Keret a mezők körül

4. példa Távolítsa el a keretet

Keretek keresztül box-shadow

Bár a box-shadow tulajdonság célja, hogy árnyékot adjon egy elem köré, szegélyek létrehozására is használható, és olyanokat is, amelyeket nem lehet kerettel vagy körvonallal megtenni. Ez annak köszönhető, hogy az árnyékok száma korlátlan lehet, amelyek paraméterei vesszővel elválasztva vannak felsorolva.

A keret létrehozásához az első három paramétert nullára kell állítani, ezek felelősek az árnyék helyzetéért és elmosódásáért. A negyedik lehetőség be ez az eset a szegély vastagságáért felelős, az ötödik pedig a szegély színét állítja be. A második keretnél a negyedik paraméter a két keret vastagságának összegével egyenlő.

A 4. példa bemutatja, hogyan adjunk hozzá két dobozt és egy szegélyt a jobb oldalhoz egyetlen box-shadow tulajdonság használatával.

4. példa: Box-shadow használata

Eredmény ezt a példátábrán látható. 3.

Rizs. 3. A box-shadow tulajdonság által létrehozott keretek

CSS keret Az elem egy vagy több sor, amely körülveszi az elem tartalmát és kitöltését. A szegély beállítása a rövid tulajdonsághatár használatával történik. A keretstílus három tulajdonsággal állítható be: stílus, színÉs szélesség.

A HTML-elemek szegélyezése CSS-tulajdonságokkal

1. Szegély-stílus

Alapértelmezés szerint a szegélyek mindig az elem hátterére húzódnak, és a háttér az elem külső széléig terjed. A keret stílusa határozza meg a megjelenítését, enélkül a keret tulajdonságai egyáltalán nem lesznek láthatóak. Egy elemhez beállíthat egy szegélyt az összes oldalhoz egyidejűleg a border-style tulajdonság használatával, vagy minden oldalhoz külön a border-top stílusú minősítő tulajdonságok használatával stb. Nem örökölt.

határ stílus (szegély-felül-stílus, szegély-jobb-stílus, szegély-alul-stílus, szegély-bal-stílus)
Értékek:
egyik sem	Az alapértelmezett érték azt jelenti, hogy nincs keret. Eltávolítja az elem szegélyét is a tulajdonságkészlet értékével rendelkező elemek csoportjából.
rejtett	Egyenértékű egyikkel sem.
pontozott	pontozott
szaggatott	szaggatott
szilárd	szilárd
kettős	kettős
horony	horony
gerinc	gerinc
betét	betét
kezdet	kezdet
{1,4}	Soroljon fel egyszerre négy különböző stílust egy elem szegélyéhez, csak a szegélystílus tulajdonsághoz: (szegély stílusú: tömör pontozott, nem pontozott;)
a kezdeti
örököl

Szintaxis

P (szegély-stílus: tömör;) p (szegély-felső stílus: tömör;)

2. Szegély színe keret-szín

A tulajdonság egyszerre állítja be az összes oldal keretének színét. A finomítási tulajdonságok segítségével egyéni színt állíthat be egy elem mindkét oldalának szegélyéhez. Ha nincs megadva a keret színe, akkor az megegyezik az elem szövegszínével. Ha az elemnek nincs szövege, akkor a keret színe megegyezik a szülőelem szövegszínével. Nem örökölt.

szegély színe (szegély-felső-szín, szegély-jobb-szín, szegély-alsó-szín, szegély-bal-szín)
Értékek:
átlátszó	Beállítja a keret átlátszó színét. Ebben az esetben a keret szélessége megmarad. Használható a szegély színének megváltoztatására, amikor az egeret egy elem fölé viszi, hogy elkerülje az elem elmozdulását.
szín	A keret színét a tulajdonságértékek segítségével állítjuk be. (szegélyszín: #cacd58;)
{1,4}	Soroljon fel egyszerre négy különböző színt egy elem szegélyéhez, csak a keretszín tulajdonsághoz: (szegélyszín: #cacd58 #5faf8a #b9cea5 #aab238;)
a kezdeti	Egy tulajdonság értékét az alapértelmezett értékre állítja.
örököl	A tulajdonság értékét a szülőelemtől örökli.

Szintaxis

P (szegélyszín: #cacd58;)

3. Határszélesség

A keret szélességét hosszegységekkel vagy kulcsszavakkal adjuk meg. Ha a border-style tulajdonság none értékre van állítva, és az elem szegélye bizonyos szélességű, akkor ebben az esetben a keret szélessége nullára van állítva. Nem örökölt.

Szintaxis

P (szegély szélessége: 2 képpont;)

4. A keret beállítása egy tulajdonsággal

A border tulajdonság lehetővé teszi a következő tulajdonságok kombinálását: border-width , border-style , border-color , például:

Div (szélesség: 100 képpont; magasság: 100 képpont; szegély: 2 képpont, tömör szürke; )

Ebben az esetben a megadott tulajdonságok egyidejűleg az elem összes szegélyére vonatkoznak. Ha valamelyik érték nincs megadva, az alapértelmezett érték veszi át a helyét.

5. Keret beállítása egy elem egyik szegélyéhez

Abban az esetben, ha egy elem szegélyeinek más stílusát kell beállítani, használhat egy rövid jelölést a megfelelő szegélyhez.
Az alább felsorolt ​​tulajdonságok a következő tulajdonságokat egyesítik egyetlen deklarációban: border-width , border-style és border-color . A tulajdonságok listája a megadott sorrendben kerül megadásra, míg egy vagy két érték elhagyható, ebben az esetben az értékek az alapértelmezett értékeket veszik fel.

A felső szegély stílusa a border-top tulajdonsággal állítható be, az alsó szegély border-bottom , a bal szegély border-bal , a jobb szegély pedig border-right .

Szintaxis

P (szegély-felső: 2 képpont, tömör szürke;)