Popis

Nastavuje štýl ohraničenia okolo prvku. Je dovolené nastaviť jednotlivé štýly pre rôzne strany prvku.

Syntax

hraničný štýl: (1,4) | dediť

Hodnoty

Na ovládanie vzhľadu okraja je k dispozícii niekoľko hodnôt vlastností v štýle hraníc. Vzhľad závisí od použitého prehliadača a zadanej hrúbky okraja. Tabuľka 1 zobrazuje názvy štýlov a výsledný rámec pri rôznych hodnotách hrúbky- 1, 3, 5 a 7 pixelov.

Okrem hodnôt uvedených v tabuľke sa používajú nasledujúce kľúčové slová.

None (Žiadne) Nezobrazuje orámovanie a jeho šírka (border-width) je nastavená na nulu. skrytý Má rovnaký účinok ako žiadny, okrem použitia štýlu ohraničenia na bunky tabuľky, ktorých vlastnosť ohraničenia je nastavená na zbalenie. V takom prípade sa okraj okolo bunky vôbec nezobrazí. dedí Dedí hodnotu po rodičovi.

Je dovolené použiť jednu, dve, tri alebo štyri hodnoty, pričom ich oddeľte medzerou. Účinok závisí od množstva a je uvedený v tabuľke. 2.

HTML5 CSS2.1 IE Cr Op Sa Fx

Veľa času na sedenie, myslenie a elita, sedenie na nehmatateľnosť, euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

Ryža. 1. Použitie vlastnosti štýlu ohraničenia

Objektový model

document.getElementById ("elementID") .style.borderStyle

Prehliadače

Prehliadač internet Explorer až do šiestej verzie s hrúbkou okraja 1 pixelov sú bodkované ako prerušované. Ak je hrúbka 2 pixely alebo väčšia, bodkovaná hodnota funguje správne. Táto chyba je opravená v IE7, ale iba pre všetky okraje 1px. Ak je jedno z okrajov poľa hrubé 2 pixely, potom v IE7 bude bodkovaná hodnota prerušovaná.

Internet Explorer až do verzie 7.0 vrátane nepodporuje skryté a dedičné hodnoty.

Hraničný štýl v rôzne prehliadače sa môžu mierne líšiť pri použití hodnôt drážky, hrebeňa, vloženia alebo počiatočných hodnôt.

Vlad Merzhevich

S pomocou CSS K prvku môžete pridať orámovanie niekoľkými spôsobmi. V zásade sa samozrejme používa vlastnosť border ako najuniverzálnejšia, ako aj obrys a prekvapivo box-shadow, ktorej hlavnou úlohou je vytvoriť tieň. Ďalej zvážime tieto metódy a ich rozdiely medzi sebou.

Obrys majetku

Najjednoduchšia vlastnosť na vytváranie rámcov. Má rovnaké parametre ako okraj, ale v niektorých podrobnostiach sa od neho výrazne líši:

• okolo prvku je nakreslený obrys (okraj je vo vnútri);
• obrys neovplyvňuje rozmery prvku (k šírke a výške prvku sa pripočíta hranica);
• obrys je možné nastaviť iba okolo celého prvku, ale nie na jednotlivých stranách (ohraničenie je možné použiť pre akúkoľvek stranu alebo všetky naraz);
• obrys nie je ovplyvnený polomerom zaoblenia nastaveným vlastnosťou border-radius (ohraničenie je ovplyvnené).

Vynára sa otázka - v akých prípadoch je potrebný prehľad, keď jeho úlohu napriek uvedeným rozdielom plne prevezme hranica? Nie je toľko situácií, ale vyskytujú sa:

• vytváranie komplexných viacfarebných rámov;
• pridanie okraja k prvku, keď naň umiestnite kurzor myši;
• automatické skrytie rámca pridaného prehliadačom pre niektoré prvky, keď dostanú zaostrenie;
• v prípade obrysu môžete nastaviť vzdialenosť od okraja prvku k rámu pomocou vlastnosti obrys-posun.

Viacfarebné rámy

Musíte pochopiť, že obrys v žiadnom prípade nenahrádza hranicu a môže s ňou dobre existovať, ako je to uvedené v príklade 1.

Príklad 1. Vytvorenie rámca

V tomto prípade je okolo prvku pridaný čierny okraj, ktorý je od pozadia oddelený bielym okrajom (obr. 1).

Ryža. 1. Rám okolo prvku

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

Pridanie okraja cez okraj zvyšuje šírku prvku, čo je celkom zrejmé pri kombinácii pseudotriedy border a: hover. Sú dva spôsoby, ako to „vyhrať“. Najjednoduchšie je nahradiť rámček obrysom, o ktorom vieme, že nemá žiadny vplyv na rozmery prvku (príklad 2).

Príklad 2. Rám pri vznášaní

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ámik, ktorý zodpovedá farbe pozadia, a potom pri vznášaní zmeňte jeho parametre (príklad 3). Potom nedôjde k posunutiu prvku, pretože rámec už existuje od začiatku. Vždy však pamätajte na to, že šírka prvku je súčtom hodnôt šírky, okraja vľavo a okraja vpravo. Podobná situácia je aj s výškou.

Príklad 3. Rám pri vznášaní

Okraj okolo polí formulára

V niektorých prehliadačoch (Chrome, Safari, najnovšie verzie Opera), po zaostrení sa okolo polí formulára objaví malý farebný okraj (obrázok 2). Ak ho chcete odstrániť, stačí pridať hodnotu None k vlastnosti osnovy v štýloch, ako je to znázornené v príklade 4.

Ryža. 2. Rámček okolo polí

Príklad 4. Odstránenie rámu

Rámy cez box-shadow

Aj keď je vlastnosť box-shadow určená na pridanie tieňa okolo prvku, môže sa použiť aj na vytvorenie orámovania, ktoré nie je možné vykonať s orámovaním alebo obrysom. Dôvodom je skutočnosť, že počet tieňov môže byť neobmedzený, pričom parametre sú uvedené oddelené čiarkami.

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

Príklad 4 ukazuje, ako pridať dve orámovania a jednu orámovanie doprava pomocou jednej vlastnosti tieň-box.

Príklad 4. Použitie box-shadow

Výsledok tohto príkladu je znázornený na obr. 3.

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

Slúži na zobrazenie ručne nakresleného okraja okolo prvku. Hrúbka okraja je nastavená vlastnosťou border. Ak je zadaný border: 0, orámovanie sa nezobrazí. Pri ostatných hodnotách orámovania má kresba vždy prednosť. Pozadie, ak je nastavené pomocou vlastnosti pozadia, sa zobrazí pod rámcom.

Syntax

Okrajový obrázok: žiadny | [<адрес> [<число> | <проценты>]{1,4} ? ] && {0,2}

Označenia

	Popis	Príklad
<тип>	Udáva typ hodnoty.	<размер>
A && B	Hodnoty musia byť zobrazené v uvedenom poradí.	<размер> && <цвет>
A | B	Označuje, že by mala byť vybratá iba jedna z navrhovaných hodnôt (A alebo B).	normálne | malé písmená
A || B	Každú hodnotu je možné použiť samostatne alebo v spojení s inými v ľubovoľnom poradí.	šírka || počítať
	Skupinové hodnoty.	[plodina || kríž]
*	Opakujte nula alebo viackrát.	[,<время>]*
+	Opakujte jeden alebo viackrát.	<число>+
?	Zadaný typ, slovo alebo skupina je voliteľný.	vložiť?
(A, B)	Opakujte aspoň A, ale nie viac ako B krát.	<радиус>{1,4}
#	Opakujte jeden alebo viackrát oddelene čiarkami.	<время>#

×

Hodnoty

žiadny Nezobrazí nakreslený okraj, použije sa nastavený štýl ohraničenia.<адрес>Spôsob grafický súbor... Požadovaný parameter.

Samotný obrázok na vytvorenie rámca je znázornený na obr. 1 a pozostáva z deviatich oblastí: štyroch rohov, hornej, pravej, spodnej, ľavej strany a centrálnej časti, v ktorej je zobrazený obsah prvku.

Ryža. 1. Obrázok na vytvorenie rámu

<число>

Jedna, dve, tri alebo štyri hodnoty, ktoré udávajú rozmery častí obrázka v pixeloch, čím sa špecifikujú oblasti rozdelenia. Samotné jednotky nie sú zapísané, ale iba číslo (10, nie 10 pixelov). 2 červené čiary označujú oblasti potrebné na vytvorenie rámu.

Ryža. 2. Rozdelenie pôvodného obrazu na oblasti

Je dovolené použiť jednu, dve, tri alebo štyri hodnoty, pričom ich oddeľte medzerou. Účinok závisí od počtu hodnôt a je uvedený v tabuľke. 1.

<проценты>Rovnako<числу>, ale hodnoty sú uvedené v percentách. Vyžaduje sa jeden alebo druhý parameter.<толщина>Na lomku sa používa zápis jednej, dvoch, troch alebo štyroch hodnôt hrúbky okraja na každej strane prvku. Je to analogické k šírke okraja a používa rovnakú syntax. úsek Natiahne okrajový výkres tak, aby zodpovedal rozmerom prvku. Toto je predvolené nastavenie. opakovať Opakuje kresbu orámovania. round Zopakuje vzor a zmení jeho mierku tak, aby sa na boku prvku objavil celočíselný počet obrázkov.

Vplyv týchto parametrov na pohľad na rám je znázornený na obr. 3.

		okrúhly

Ryža. 3. Výsledok použitia parametrov strečing, opakovanie a zaokrúhľovanie

Príklad

Výsledok príkladu je znázornený na obr. 4.

Ryža. 4. Typ rámu

Objektový model

Objekt.styl.borderObrázok

Poznámka

Firefox 15.0 podporuje vlastnosť -moz-border-image.

Safari až 6.0, Chrome až 15.0, Android až 4.4 podporuje vlastnosť -webkit-border-image.

Opera pred verziou 15.0 podporuje vlastnosť -o-border-image.

Špecifikácia

Každá špecifikácia prechádza niekoľkými fázami schválenia.

• Odporúčanie - Táto špecifikácia je schválená W3C a odporúčaná ako štandard.
• Odporúčanie kandidáta ( Možné odporúčanie) - skupina zodpovedná za štandard je presvedčená, že spĺňa svoje ciele, ale na implementáciu štandardu je potrebná pomoc vývojárskej komunity.
• Navrhované odporúčanie ( Navrhované odporúčanie) - V tomto mieste je dokument predložený poradnému výboru W3C na konečné schválenie.
• Pracovný koncept - vyspelejšia verzia návrhu po diskusii a revízii na kontrolu v rámci komunity.
• Návrh redaktora ( Redakčný návrh) - návrh verzie štandardu po úprave editormi projektu.
• Návrh ( Návrh špecifikácie) je prvým návrhom normy.

×

Vlastnosť CSS border aliasy na vytvorenie ohraničenia objektu, konkrétne hrúbka okraja, jeho farba a štýl. Táto vlastnosť je v HTML široko používaná. Môžete vytvárať rôzne efekty, aby ste lepšie vnímali obsah na stránke. Napríklad navrhnite bočný panel, hlavičku webu, ponuku atď.

1. Syntax ohraničenia CSS

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

• border -width - hrúbka okraja. 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 vykresleného okraja. Môže mať nasledujúce hodnoty
  • žiadne alebo skryté - zruší okraj
  • bodkovaný - bodkovaný rám
  • prerušovaný - rámček pomlčky
  • plná - jednoduchá čiara (používa sa najčastejšie)
  • dvojité - dvojité ohraničenie
  • drážka - 3D drážkovaný okraj
  • hrebeň, vložka, začiatok - rôzne efekty 3D rámov
  • dediť - použije sa hodnota rodičovský prvok
• border -color - farba ohraničenia. Možno nastaviť pomocou konkrétne meno farby alebo vo formáte RGB (pozrite si názvy farieb html pre web)

Poznámka

Hodnoty vo vlastnosti CSS border je možné zadať v ľubovoľnom poradí. Najbežnejšie používanou sekvenciou je „farba štýlu hrúbky“.

2. Príklady s rôznymi hranicami hraníc CSS

2.1. Príklad. Rôzne štýly hraničnej dekorácie v hraničnom štýle

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 », позволяет задавать толщину, цвет и тип линии по периметру вокруг элемента. Параметры данного свойства могут записываться в одной строке, разделяясь через пробел и в любом порядке.

• - толщина линии один пиксель
• - сплошная линия
• - белый цвет
• - чёрный цвет
• - серый цвет

Сплошная граница элемента

Штриховая граница элемента

Пунктирная граница элемента

Граница элемента двойной линией

Свойство отдельных участков границы

Вдавленная рифленая рамка в объёме

Выпуклая рифленая рамка в объёме

Объемная вдавленная рамка

Объемная выпуклая рамка

Уроки / CSS /

Урок 7. Рамка элемента CSS

Практически на каждом на сайте используется свойство, которое создаёт вокруг элемента рамку. Она нужна либо для кнопок, либо для блоков с текстом. Для создания рамки у элемента в CSS есть два свойства: border и outline. Рассмотрим их.

border

Данное свойство нужно для установки рамки вокруг элемента, указывает на его границу в web-документе, ширина рамки учитывается при расположении элемента. Имеет 3 значения — цвет, толщину и тип рамки.

Синтаксис у свойства border следующий:

border: Ширина Тип Цвет;
Можно выбрать и другой порядок указания значений свойства, но главное через пробел.

Толщину (ширину) рамки нужно указывать в пикселях (px) или процентах (%).
Цвет можно задать либо в формате RGB (Red Green Blue), либо в HTML HEX кода.

Ниже представлены ТИПЫ линий с их названиями:

Как установить рамки у элемента? Делаем следующим образом:

#block {
border:3px solid #0085сс; /* установили линию толщиной 3 пикселя синего цвета */
}

Если Вы хотите установить одну-две-три рамки с определённой стороны , то указываем так:

border-top — рамка сверху;
border-bottom — рамка снизу;
border-left — рамка слева;
border-right — рамка справа;

Block {
border-right: 3px solid #0085cc;
border-bottom: 2px dashed #0085cc;
}

Если Вы хотите убрать рамки элемента в CSS, то пропишите в свойстве border — none

Empty {
border: none; /* у элемента с классом empty не будет рамки */
}

outline

Outline — это свойство, которое нужно для установки внешней рамки элемента.

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

outline: 2px dotted #0085cc; /* рамка 2 пикселя пунктиром синяя*/
Для outline, как и для border, убрать рамки можно прописав none:

Спасибо за внимание!

Предыдущая статья
Урок 6.

Границы элемента.

Отступы и поля в CSS. Что такое margin и padding?Следующая статья
Урок 8. Как установить цвет текста и фон элемента в CSS?

Комментарии к статье (vk.com)

border

Поддержка браузерами

12.0+	4.0+	1.0+	1.0+	3.5+	1.0+

Описание

CSS свойство позволяет одновременно установить ширину, стиль и цвет для границы блока. Граница блока — обычная линия/рамка, которая окружает блок со всех сторон. Стоит учитывать, что при добавлении рамки она будет влиять на общий размер блока.

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

Примечание: для того чтобы установить рамки только на определенных сторонах элемента, используйте следующие свойства: border-top, border-bottom, border-left, border-right.

Совет: как правило, при использовании рамки требуется добавлять внутренние отступы.

CSS-свойство: border

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

Синтаксис

border: border-width border-style border-color|inherit;

Значения свойства

Пример

Tu je nejaký text.

Výsledok tohto príkladu v okne prehliadača:

Ako nastaviť farbu, štýl a veľkosť orámovania v rámčekoch.

V značkovacích jazykoch je obrubník ( hranica), majú iba tabuľky, obrázky a rámčeky, v niektorých prípadoch je možné nastaviť farbu orámovania a je to.

Hraničný atribút

Kaskádové štýly nám poskytujú viac možností, ale najskôr.

V CSS môžeme ovládať šírku orámovania pomocou šírka okraja alebo, presnejšie povedané, hrúbku každej strany môžeme ovládať samostatne:
border-top-width- hrúbka horného okraja
border-right-width- hrúbka pravého okraja
border-bottom-width- hrúbka dolného okraja
border-left-width- hrúbka ľavého okraja
Ale môže existovať aj skrátená forma:
P (šírka orámovania: vpravo hore vľavo dole;)(vpravo hore dole vľavo).
Šírku obrubníka je možné nastaviť:
figúrky DIV (border-width: 5px), od nuly do nekonečna, t.j. pozitívne.
tenký- tenký okraj, DIV (šírka okraja: tenký)
stredné- stredný okraj, DIV (šírka okraja: stredný)
hustý- hrubý okraj, DIV (šírka okraja: hrubý)
S číslami je to jasné, ale pri týchto hodnotách to všetko závisí od prehliadača, ale aj tak tenký<= medium <= thick .

Farbu okraja môžeme ovládať aj pomocou farba okraja alebo presnejšie s farbou každej strany:
border-top-color farba horného okraja;
border-right-color farba pravého okraja;
farba dolného okraja farba spodného okraja;
orámovanie-ľavá farba farba okraja na ľavej strane.
Hodnota farby je nastavená ako pre farba, t.j. jedna zo 16 farieb: aqua, čierna, modrá, fuchsiová, šedá, zelená, limetková, gaštanová, námornícka, olivová, fialová, červená, strieborná, modrozelená, biela alebo žltá, je možné nastaviť aj farby: farba: # 000000, farba: # AF0 , farba: rgb (255,0,0) alebo farba: rgb (100%, 0%, 0%).
Bez ohľadu na to, akú farebnú schému si vyberiete, prehliadače ju napriek tomu preložia farba: rgb (255,0,0)... Napríklad farba: limetková = farba: # 00ff00 = farba: # 0F0 = farba: rgb (0%, 100%, 0%), ale pre prehliadač je to jedno farba: rgb (0,255,0), t.j. vypočíta túto hodnotu.

Ak je možné hrúbku a farbu okraja ovládať pomocou HTML, potom štýl ( hraničnom štýle) Len CSS !!!
Štýl je možné ovládať každou stranou zvlášť:
v štýle border-topštýl horného okraja;
štýl pravý okrajštýl pravého okraja;
štýl spodného okrajaštýl spodného okraja;
štýl ohraničenia vľavoštýl okraja na ľavej strane.
Teraz sa pozrime na hodnoty štýlu:
1)hraničný štýl: žiadny- Toto je predvolená hodnota podobná šírke orámovania: 0.
2)štýl hraníc: skrytý- To isté okrem tabuliek, na ktoré sa pozrieme neskôr.
3)štýl ohraničenia: bodkovaný- Bodkovaný okraj.
4)štýl ohraničenia: prerušované- Bodkovaná čiara.
5)štýl hraníc: pevný- Plný okraj čiary, t.j. ako v HTML.
6)hraničný štýl: dvojitý- Dvojité plné ohraničenie, tu potrebujete šírku okraja najmenej 3 pixely.
7)hraničný štýl: drážka- Bordúra vyzerá, ako keby bola nastrihaná na plátno.
8)hraničný štýl: hrebeň- Okraj vyzerá, ako by vyčnieval z plátna.
9)štýl hraníc: vložka- Celá škatuľa vyzerá, akoby bola vtlačená do plátna.
10)hraničný štýl: začiatok- Oproti predchádzajúcemu.
Niektoré prehliadače môžu ignorovať bodkované, prerušované, dvojité, drážkové, hrebeňové, vložené a začiatočné hodnoty a zobrazovať ich ako plné, t.j. obvyklá hranica.

Toto všetko samozrejme je, ale všetky vyššie uvedené príklady sú iba princípom činnosti, nie mechanizmom.
Vládne majetok hranica implikuje (border: size style color;), toto pravidlo sa vykoná, ak sú prítomné všetky tri hodnoty a napríklad iba v tomto poradí H1 (orámovanie: 5 pixelov dvojitá červená;), ale môžu existovať výnimky, ak tieto hodnoty poskytujú značkovacie jazyky, napríklad pre tabuľku TABUĽKA (orámovanie: 2 pixely), t.j. je zadaná iba jedna hodnota.

Aby sa spravoval nie celý obrubník, ale každá časť samostatne, existujú pravidlá:
(border-top: farba štýlu veľkosti;) Ovládanie horného obrubníka;
(pravý okraj: farba štýlu veľkosti;) Ovládanie obrubníka vpravo;
(border-bottom: color style size;) Ovládanie dolného obrubníka;
(ohraničenie vľavo: farba štýlu veľkosti;) Ovládanie obrubníka vľavo.
Tieto pravidlá je možné použiť samostatne alebo všetky spoločne.

Výnimkou je toto pravidlo:
H1 (
orámovanie: 4px plná zelená;
}
Ide o to, že v CSS má posledné pravidlo najvyššiu prioritu, v tomto prípade vlastnosť border obsahuje border-left, a preto pravidlo border-left bude ignorované, a to takto:
H1 (
orámovanie: 4px plná zelená;
ľavý okraj: 2px dvojitá červená;
}
Od začiatku nastavujeme pravidlá pre celý obrubník a potom pre jednotlivé oblasti.

Mám všetko na hraniciach prvkov, okrem toho, že keď sa dostaneme k tabuľkám a iným výnimkám, zvážime niektoré vlastnosti.

CSS: hranica. Hranice živlu.

Hranice CSS3

Hranice CSS3

Pomocou CSS3 môžete vytvárať zaoblené okraje, pridávať tiene do kontajnerov a používať obrázok ako okraj - to všetko bez použitia návrhového programu, akým je Photoshop.

V tomto návode sa dozviete o nasledujúcich vlastnostiach okrajov:

• polomer hranice
• box-tieň
• hraničný obraz

Podpora prehliadača

Nehnuteľnosť	Podpora prehliadača
polomer hranice
box-tieň
hraničný obraz

Internet Explorer 9 podporuje niektoré z nových vlastností orámovania.

Firefox vyžaduje pre obrázok border-image predponu -moz-.

Chrome a Safari vyžadujú pre border-image predponu -webkit-.

Opera vyžaduje pre border-image predponu -o-.

Safari tiež vyžaduje predponu -webkit- pre box-shadow.

Opera podporuje nové vlastnosti ohraničenia.

Zaoblené rohy CSS3

Pridanie zaoblených rohov do CSS2 bolo náročné. Pre každý roh sme museli použiť iné obrázky.

V CSS3 je vytváranie zaoblených rohov jednoduché.

V CSS3 sa vlastnosť border-radius používa na vytváranie zaoblených rohov:

Tento blok má zaoblené rohy!

CSS3 Box Shadow

V CSS3 sa vlastnosť box-shadow používa na pridanie tieňov do kontajnerov:

CSS3 Border-Image

S vlastnosťou CSS3 border-image môžete použiť obrázok na vytvorenie orámovania:

Vlastnosť border-image vám umožňuje určiť border-image!

Pôvodný obrázok použitý na vytvorenie orámovania je váš:

Nové vlastnosti hranice

Hraničný atribút

Hraničný atribút, tag

, slúži na zadanie hrúbky okraja okolo stola.

Hranice HTML

Je dovolené používať orámovanie bez hodnôt, potom bude hrúbka okraja rovnaká ako jeden pixel. Rám sa predvolene zobrazuje s 3D efektmi, ale ak dodatočne použijete atribút pozadia, rám sa stane „plochým“.

Okrem toho, ak je atribút border nenulový, prehliadače tiež zobrazujú tenké okraje okolo samotných buniek. Zobrazenie týchto hraníc je možné ovládať pomocou atribútu rules.

Hodnoty

Hodnota atribútu môže byť akékoľvek nezáporné číslo určujúce veľkosť v pixeloch.

Predvolená hodnota: 0.

Syntax

Požadovaný atribút: Žiadny.

Príklad HTML: Použitie atribútu hranice

Príklad výsledku

Výsledok. Použitie atribútu border.