Vytvárať okolo toho rôzne krásne veci a prvá taká krásna vec bude rám.

Najprv sa pozrime na najjednoduchšie rámce. Na ich vytvorenie používa CSS vlastnosť border, ktorú je možné nastaviť na nasledujúce hodnoty:

pevný – pevný rám;

prerušovaný – bodkovaný rám;

bodkovaný – bodkovaný rámik;

dvojitý – dvojitý riadkový rám;

drážka – rám s tieňom;

hrebeň - s reliéfom;

Na vytvorenie jednoduchých rámov sú potrebné ďalšie dve vlastnosti

šírka – hrúbka rámu;

farba – farba rámu;

Podľa techniky skratiek sú hodnoty napísané v jednom riadku oddelené medzerami.

p(
border : 2px solid #ffff00 ;
}

výplň – vnútorná (odsadenie rámu od obsahu);

okraj — vonkajší (okraj rámu od vonkajších predmetov);

Smery sú špecifikované aj pre zahĺbenia (z ktorej strany a o koľko ustúpiť). Tieto vlastnosti sa používajú, keď je potrebné umiestniť obsah mimo stredu v rámci alebo je samotný rámec nejakým spôsobom posunutý.

horná – horná zarážka;

pravé – pravé odsadenie;

spodná – spodná zarážka;

ľavá – ľavá zarážka

Hodnoty týchto vlastností sa zapisujú v skrátenej verzii jedna za druhou (výplň: 10px 30px 15px 20px) a najprv sa nastaví horná hodnota a potom zvyšok v smere hodinových ručičiek.

Ak nastavíte iba jednu hodnotu, bude to znamenať, že odsadenie na všetkých stranách bude rovnaké.

p(
border : 2px solid #ffff00 ;

okraj: 20px;
}

Ak potrebujete umiestniť text alebo obrázok do stredu rámčeka, môžete do selektora „p“ pridať vlastnosť text-align: center;

Ďalej sa pozrime na to, ako výška a šírka rámu. Výšku rámca nastavuje prehliadač automaticky a vyberá sa tak, aby sa doň zmestil obsah s prihliadnutím na zadané zarážky. Šírku si ale nastavíme sami.

Nastavuje sa vlastnosťou width a jej hodnota označuje požadovanú veľkosť v pixeloch alebo iné dĺžkové miery akceptované na webe.

p(
border : 2px solid #ffff00 ;
padding: 10px 20px 10px 20px;
okraj: 20px;
šírka: 400px;
}

Mimochodom, nezabudnite, že keď nastavíte šírku, prehliadač túto hodnotu chápe len ako šírku obsahu. Potom k tejto hodnote pridá špecifikovanú hrúbku výplne a okraja a zobrazí konečnú veľkosť na stránke.

Posledná vec, ktorú musíte urobiť, je umiestniť rámček na stránku. Toto sa vykonáva pomocou už existujúcej vlastnosti margin.

A ak potrebujete umiestniť rámový blok do stredu stránky, do vlastnosti margin sa pridá hodnota auto.

p(
border : 2px solid #ffff00 ;
padding: 10px 20px 10px 20px;
okraj: 20px automaticky;
šírka: 400px;
}

V prvom príklade vytvorte dokument HTML a vytvorte pevný rámec pre blok tela (telo dokumentu) a jeden odsek.

V nasledujúcich príkladoch sa zmení iba CSS (to, čo je súčasťou značky štýlu).

Здравствуйте уважаемые будущие веб-мастера!
Мне 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 . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

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

Štýl orámovania môžete určiť len na jednej strane prvku. Na to použite vlastnosti border-top (horný okraj), border-right (pravý okraj), border-bottom (dolný okraj), border-left (ľavý okraj).

V tomto príklade má každá strana bloku inú hrúbku, štýl a farbu okraja.

Zamyslite sa nad tým, ako by ste mohli vytvoriť takýto tvar pomocou CSS:

Hodnoty okrajov - hrúbka, štýl a farba - je možné nastaviť samostatne pomocou špeciálnych vlastností.

• border-style - border-style.
• border-width - šírka okraja.
• border-color - farba okraja.

Zvážme každú z hodnôt samostatne.

vlastnosť v štýle hranice Štýl okrajov.

Vlastnosť border-style nastavuje štýl ohraničenia. V CSS, na rozdiel od HTML, môže byť okraj prvku nielen pevný. Pre štýl orámovania sú akceptované nasledujúce hodnoty:

1. žiadne - bez okraja (predvolené).
2. pevná - pevná hranica.
3. dvojitý - dvojitý okraj.
4. prerušovaná - bodkovaná hranica.
5. bodkovaný – hranica tvorená radom bodiek.
6. hrebeň - "hrebeň" hranica.
7. drážka - hranica "drážky".
8. vložka - znížená hranica.
9. začiatok - vytlačená hranica.

Príklady, ako vyzerajú.

žiadna hranica (žiadna)

pevná hranica

dvojité ohraničenie

okraj radu bodiek (bodkovaný)

prerušovaná hranica

okraj drážky

hrebeňová hranica

odsadený okraj (vložka)

extrudovaný okraj (začiatok)

Mimochodom, ak nastavíte farbu okraja na čiernu pre hrebeňový rám, dostanete tento výsledok.

Blok div s čiernym okrajom a hrebeňovým štýlom.

Rám vyzerá pevne, ale je to preto, že štýl hrebeňa je vytvorený pridaním efektu čierneho tieňa a čierny efekt nie je na čiernom ráme viditeľný.

Pomocou vlastnosti border-style je možné nastaviť štýl ohraničenia nielen pre všetky strany bloku. Pre jednu vlastnosť štýlu okraja je možné nastaviť niekoľko hodnôt, v závislosti od počtu hodnôt bude štýl okraja priradený k inému počtu strán bloku. Môžete nastaviť jednu, dve, tri alebo štyri hodnoty. Pozrime sa na príklady pre každý prípad.

Jedna hodnota (plná) – štýl orámovania je nastavený pre všetky strany bloku.

Dve hodnoty (plné dvojité) - prvá hodnota nastavuje štýl pre hornú a spodnú stranu, druhá pre stranu.

Tri hodnoty (plné dvojité bodky) - prvá hodnota pre hornú stranu, druhá pre strany, tretia pre spodnú stranu.

Štyri hodnoty (plné dvojité bodkované prerušované) – každá hodnota pre jednu stranu v smere hodinových ručičiek počnúc zhora.

Vlastnosť so šírkou hranice. Hrúbka okraja.

Ak chcete nastaviť šírku okraja prvku, použite vlastnosť border-width. Hrúbka okraja môže byť špecifikovaná v akýchkoľvek absolútnych jednotkách merania, napríklad v pixeloch.

Rovnako ako vlastnosť v štýle okraja, aj vlastnosť môže byť nastavená na jednu až štyri hodnoty. Pozrime sa na príklady pre každý prípad.

Príklad kódu:

Aj pre vlastnosť border-width sú vo formulári hodnoty kľúčové slová. Celkovo sú tri:

• tenký - tenký okraj;
• stredná - priemerná hrúbka;
• hrubá - hrubá hranica;

Hrúbka okraja: tenký.

Hrúbka okraja: stredná.

Hrúbka okraja: hrubá.

Vlastnosť border-color. Farba okraja.

Ak chcete ovládať farbu orámovania, použite nástroj farba orámovania. Farby pre túto vlastnosť je možné nastaviť pomocou ľubovoľnej metódy opísanej v článku „Farby v CSS“, konkrétne:

• Hexadecimálny zápis (#ff00aa) farby.
• Formát RGB je rgb(255,12,110) . Formát RGBA pre CSS3.
• Formáty HSL a HSLA pre CSS3.
• Názov farby, napríklad čierna. Úplný zoznam Názvy farieb sú uvedené v tabuľke názvov farieb CSS.

Vlastnosť border-color môže mať tiež jednu až štyri hodnoty a zaobchádza s nimi podobne ako s predchádzajúcimi vlastnosťami.

Jedna hodnota (červená).

Dve hodnoty (červená čierna).

Tri hodnoty (červená čierna žltá).

Štyri hodnoty (červená čierna žltá modrá).

Teraz sa vráťme k vyššie uvedenému problému a nakreslite obrázok:

Tu je kód, ktorý kreslí takýto obrázok, len väčší:

Nastavenie hodnôt pre strany samostatne

Vyššie bolo spomenuté, že hodnoty vlastností hraníc môžete zadať iba pre jednu stranu bloku. Na tieto účely existujú vlastnosti:

• border-top
• hranica-pravá
• okraj-dole
• ľavý okraj (ľavý okraj)

Dovoľte mi pripomenúť, že pre všetky vlastnosti sú špecifikované tri hodnoty (hrúbka, štýl a farba) v ľubovoľnom poradí. Existujú ale vlastnosti, ktoré umožňujú nastaviť hrúbku, farbu a štýl pre každú stranu zvlášť. Zápis týchto vlastností je odvodený od vyššie uvedeného.

Možnosti horného okraja (border-top).

• border-top-color – nastavuje farbu horného okraja prvku.
• border-top-width - nastavuje hrúbku horného okraja prvku.
• border-top-style – nastavuje štýl horného okraja prvku.

Možnosti pravého okraja (okraj-vpravo).

• border-right-color - nastavuje farbu pravého okraja prvku.
• border-right-width - nastavuje hrúbku pravého okraja prvku.
• border-right-style – nastavuje štýl pravého okraja prvku.

Možnosti spodného okraja (border-bottom).

• border-bottom-color – nastavuje farbu spodného okraja prvku.
• border-bottom-width - nastavuje hrúbku spodného okraja prvku.
• border-bottom-style – nastavuje štýl spodného okraja prvku.

Možnosti ľavého okraja (okraj-vľavo).

• border-left-color - nastavuje farbu ľavého okraja prvku.
• border-left-width - nastavuje hrúbku ľavého okraja prvku.
• border-left-style - nastaví štýl ľavého okraja prvku.

Príklad použitia týchto vlastností:

Vlastnosť border-radius. Zaoblenie rohov okrajov.

Vlastnosť border-radius je určená na zaoblenie rohov okrajov prvku. Táto vlastnosť sa objavila v CSS3 a funguje správne vo všetkých moderné prehliadače, okrem Internet Explorer 8 (a staršie verzie).

Hodnoty môžu byť ľubovoľné čísla používané v CSS.

Vlastnosť s polomerom okraja: 15 pixelov.

Ak nie je špecifikovaný blokový rámec, zaoblenie sa objaví s pozadím. Tu je príklad zaobleného bloku bez okraja, ale s farbou pozadia:

Vlastnosť s polomerom okraja: 15 pixelov.

Existujú vlastnosti na zaoblenie každého jednotlivého rohu prvku. Tento príklad ich používa všetky:

Polomer okraja vľavo hore: 15 pixelov; border-top-right-radius: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 0;

Vlastnosť s polomerom okraja: 15 pixelov.

Hoci tento kód môže byť napísaný v jednej deklarácii: border-radius : 15px 0 15px 0 . Faktom je, že vlastnosť border-radius môže byť nastavená od jednej do štyroch hodnôt. V tabuľke nižšie sú uvedené pravidlá, ktorými sa takéto oznámenia riadia.

Po dôkladnom preštudovaní tejto tabuľky môžete pochopiť, že ide o najkratší záznam požadovaný štýl bude vyzerať takto: border-radius : 15px 0 . Existujú len dva významy.

Trochu praxe

Kreslenie citróna pomocou CSS.

Tu je kód pre takýto blok:

Okraj: 0 auto; /* Vycentrovať blok */ šírka: 200px; výška: 200px; pozadie: #F5F240; orámovanie: 1px plný #F0D900; border-radius: 10px 150px 30px 150px;

Obrázok sme už nakreslili:

Teraz z toho nechajme trojuholník:

Kód trojuholníka je:

Okraj: 0 auto; /* Vycentrovať blok */ padding: 0px; šírka: 0px; výška: 0; orámovanie: 30px plná biela; farba okraja-dola: červená;

Vlastnosť CSS border sa používa na vytvorenie okraja objektu, konkrétne hrúbky okraja, jeho farby a štýlu. Táto vlastnosť je široko používaná v HTML. Môžete vytvárať rôzne efekty pre lepšie vnímanie obsahu na stránke. Napríklad navrhnite bočný panel, hlavičku webovej stránky, menu atď.

1. Syntax ohraničenia CSS

hranica: border-width border-style border-color | dediť;

• border-width - hrúbka hranice. Môžete ho nastaviť v pixeloch (px) alebo použiť štandardné hodnoty tenký, stredný, hrubý (líšia sa iba šírkou v pixeloch)
• border-style - štýl zobrazeného okraja. Môže nadobudnúť nasledujúce hodnoty
  • žiadne alebo skryté - zruší hranicu
  • bodkovaný - bodkovaný rám
  • čiarkovaný - rám vyrobený z čiarok
  • plná - jednoduchá čiara (najčastejšie používaná)
  • dvojitý - dvojitý rám
  • drážka - drážkovaný 3D okraj
  • hrebeň, vložka, začiatok - rôzne efekty 3D rámu
  • zdediť - použije sa hodnota nadradeného prvku
• border-color - farba okraja. Dá sa nastaviť pomocou konkrétne meno farby alebo vo formáte RGB (pozri názvy html farieb pre stránku)

Poznámka

Hodnoty vo vlastnosti CSS border je možné nastaviť v ľubovoľnom poradí. Najčastejšie používaná sekvencia je „farba štýlu hrúbky“.

2. Príklady s rôznymi okrajmi CSS

2.1. Príklad. Rôzne štýly dizajnu okrajov v štýle okrajov

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. Создание рамки

V tomto príklade je okolo prvku pridaný čierny rám, ktorý je od pozadia oddelený bielym okrajom (obr. 1).

Ryža. 1. Rám okolo prvku

Rám pri použití: vznášať sa

Pri pridávaní rámca cez border sa šírka prvku zväčšuje, čo je dosť citeľné pri kombinácii border a pseudotriedy :hover. Sú dva spôsoby, ako to „vyhrať“. Najjednoduchšie je nahradiť border za obrys , ktorý, ako vieme, nemá vplyv na veľkosť prvku (príklad 2).

Príklad 2: Frame on Hover

obrys nie je vždy vhodný, už len preto, že zaoblenie rohov to neovplyvňuje. Tu je vhodná druhá metóda - pridajte neviditeľný rám alebo rám, ktorý sa zhoduje s farbou pozadia, a potom zmeňte jeho parametre pri prechode myšou (príklad 3). Potom nedôjde k žiadnemu posunutiu prvku, pretože rám pôvodne už existuje. Vždy si však pamätáme, že šírka prvku je súčtom hodnôt width , border vľavo a border vpravo. S výškou je situácia podobná.

Príklad 3: Frame on Hover

Ohraničenie polí formulára

V niektorých prehliadačoch (Chrome, Safari, najnovšie verzie Opera) sa okolo polí formulára po ich zaostrení zobrazí malý farebný rámik (obr. 2). Ak ho chcete odstrániť, stačí pridať hodnotu none do vlastnosti obrysu v štýloch, ako je znázornené v príklade 4.

Ryža. 2. Zarámujte okraje

Príklad 4. Odstránenie rámu

Rámy cez box-shadow

Hoci vlastnosť box-shadow je určená na pridanie tieňa okolo prvku, možno ju použiť aj na vytvorenie okrajov, ktoré nemožno vytvoriť pomocou border alebo obrys . To všetko vďaka tomu, že počet tieňov môže byť neobmedzený, ktorých parametre sú uvedené oddelené čiarkami.

Ak chcete získať snímku, prvé tri parametre by mali byť nastavené na nulu, sú zodpovedné za polohu tieňa a jeho rozmazanie. Štvrtý parameter v v tomto prípade je zodpovedný za hrúbku okraja a piaty nastavuje farbu okraja. Pre druhý rám sa štvrtý parameter rovná súčtu hrúbok dvoch rámov.

Príklad 4 ukazuje, ako pridať dva rámčeky a jeden okraj napravo pomocou jedinej vlastnosti box-shadow.

Príklad 4: Použitie box-shadow

Výsledok tento príklad znázornené na obr. 3.

Ryža. 3. Rámy vytvorené vlastnosťou box-shadow

orámovanie CSS Prvok je jedna alebo viac čiar obklopujúcich obsah prvku a jeho výplň. Hranica je špecifikovaná pomocou vlastnosti stenografického ohraničenia. Štýl rámu sa nastavuje pomocou troch vlastností: štýl, farba A šírka.

Rámovanie prvkov HTML pomocou vlastností CSS

1. Hraničný štýl

V predvolenom nastavení sa okraje vždy kreslia na vrch pozadia prvku, pričom pozadie siaha až po vonkajší okraj prvku. Štýl rámu určuje jeho zobrazenie bez tejto vlastnosti, rámy nebudú vôbec viditeľné. Pre prvok môžete nastaviť orámovanie pre všetky strany súčasne pomocou vlastnosti border-style alebo pre každú stranu samostatne pomocou kvalifikačných vlastností border-top-style atď. Nezdedené.

border-style (štýl okraja hore, štýl okraja doprava, štýl okraja dole, štýl okraja vľavo)
Hodnoty:
žiadny	Predvolená hodnota znamená bez rámu. Tiež odstráni rámec prvku zo skupiny prvkov s hodnotou tejto sady vlastností.
skryté	Ekvivalentné žiadnemu.
bodkovaný	bodkovaný
prerušovaná	prerušovaná
pevný	pevný
dvojitý	dvojitý
drážka	drážka
hrebeň	hrebeň
vložka	vložka
začiatok	začiatok
{1,4}	Výpis štyroch rôznych štýlov pre orámovanie prvku naraz, len pre vlastnosť border-style: (štýl orámovania: plné bodkované žiadne bodkované;)
počiatočné
dediť

Syntax

P (štýl okraja: plný;) p (štýl okraja: plný;)

2. Farba rámu border-color

Vlastnosť nastavuje farbu rámov na všetkých stranách súčasne. Pomocou vlastností zjasňovania môžete nastaviť inú farbu okraja každej strany prvku. Ak pre rám nie je určená žiadna farba, bude rovnaká ako farba textu prvku. Ak prvok neobsahuje žiadny text, farba okraja bude rovnaká ako farba textu nadradeného prvku. Nezdedené.

border-color (border-top-color, border-right-color, border-bottom-color, border-left-color)
Hodnoty:
transparentný	Nastaví priehľadnú farbu okraja. Zároveň zostáva šírka rámu. Dá sa použiť na zmenu farby orámovania, keď umiestnite kurzor myši na prvok, aby ste zabránili posunutiu prvku.
farba	Farba rámov sa nastavuje pomocou hodnôt vlastnosti. (farba orámovania: #cacd58;)
{1,4}	Výpis štyroch rôznych farieb pre okraje prvku naraz, len pre vlastnosť border-color: (farba orámovania: #cacd58 #5faf8a #b9cea5 #aab238;)
počiatočné	Nastaví hodnotu vlastnosti na predvolenú hodnotu.
dediť	Zdedí hodnotu vlastnosti z nadradeného prvku.

Syntax

P (farba orámovania: #cacd58;)

3. Šírka okrajov

Šírka rámca sa určuje pomocou jednotiek dĺžky alebo kľúčových slov. Ak je vlastnosť border-style nastavená na žiadny a okraj prvku je nastavený na určitú šírku, potom je v tomto prípade šírka okraja nastavená na nulu. Nezdedené.

Syntax

P (šírka okraja: 2px;)

4. Nastavenie rámca s jednou vlastnosťou

Vlastnosť border vám umožňuje kombinovať nasledujúce vlastnosti: border-width , border-style , border-color , napríklad:

Div (šírka: 100px; výška: 100px; orámovanie: 2px plná sivá farba; )

V tomto prípade budú špecifikované vlastnosti aplikované na všetky okraje prvku súčasne. Ak nie je zadaná žiadna hodnota, nahradí ju predvolená hodnota.

5. Nastavenie rámčeka pre jeden okraj prvku

V prípadoch, keď potrebujete pre prvok určiť iný štýl orámovania, môžete pre príslušný orámovanie použiť skrátený zápis.
Vlastnosti uvedené nižšie spájajú nasledujúce vlastnosti do jednej deklarácie: border-width , border-style a border-color . Zoznam vlastností je špecifikovaný v danom poradí, pričom jednu alebo dve hodnoty je možné preskočiť, v takom prípade ich hodnoty nadobudnú predvolené hodnoty.

Štýl horného okraja sa nastavuje pomocou vlastnosti border-top, bottom- border-bottom , left- border-left a right- border-right .

Syntax

P (horný okraj: 2 pixely jednofarebné;)