Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Что обозначает border в css


Border CSS: создаем границы для элементов — учебник CSS

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

Граница располагается между полем и отступом. Это значит, что margin находится за границей. Границу можно задавать как со всех четырех сторон (как бы заключая блок в рамку), так и с одной, двух или трех сторон. В CSS можно управлять толщиной, цветом и стилем границ. Изучим это подробнее.

Border-width: ширина границы

С помощью свойства border-width задается ширина границы. Наиболее часто этот размер указывается в пикселях. Можно задать одинаковую либо различную ширину для всех четырех границ, например:

/* все 4 границы имеют ширину 2px: */ border-width: 2px; /* верхняя и нижняя границы имеют ширину 2px, левая и правая — 4px: */ border-width: 2px 4px; /* верхняя граница — 2px, левая и правая — 6px, нижняя — 3px: */ border-width: 2px 6px 3px; /* верхняя граница — 2px, правая — 3px, нижняя — 4px, левая — 5px: */ border-width: 2px 3px 4px 5px;

Кроме этого, существуют ключевые слова для обозначения ширины границы:

  • thin — граница шириной 2px;
  • medium — граница шириной 4px;
  • thick — граница шириной 6px.

Border-color: цвет границы

Свойство border-color задает цвет для границ. Цвета можно указывать в любом формате CSS: ключевыми словами, в шестнадцатеричном виде либо в RGB — зависит от того, как вам удобнее. По аналогии с предыдущим свойством, можно устанавливать как один цвет для всех границ, так и выбирать разные цвета для каждой границы.

border-color: #FFFF00;

Также можно задать прозрачный цвет, записав:

border-color: transparent;

Border-style: стиль границы

Благодаря свойству border-style вы можете делать из обычной границы пунктирную, двойную, объемную — существует много различных значений. Для этого воспользуйтесь следующими ключевыми словами:

  • solid — сплошная граница;
  • dotted — граница из точек;
  • dashed — пунктирная граница;
  • double — двойная граница;
  • groove — объемная граница-выемка;
  • ridge — объемная граница с толстой кромкой (по сути, инверсия предыдущего стиля);
  • outset — выдавленная граница;
  • inset — вдавленная граница (по сути, инверсия предыдущего стиля).

Как и в случае со свойствами border-width и border-color, для каждой границы блока можно задавать отдельный стиль — например, вы можете сделать верхнюю и нижнюю границы пунктирными, а правую и левую — двойными. Здесь уже все зависит лишь от фантазии.

border-style: double dotted;

Обратите внимание: в разных браузерах внешний вид границ может немного отличаться.

Общее CSS-свойство border: 3 в 1

Чтобы задать стиль для границы, не обязательно по очереди использовать все три вышеперечисленных свойства. Достаточно знать об общем универсальном свойстве border CSS, с помощью которого вы гораздо быстрее напишете стиль и сэкономите место. Для этого в произвольном порядке запишите значения для всех трех свойств:

border: 2px dotted #FF0000;

Границы для отдельных сторон

При помощи дополнительных свойств border в CSS вы можете создавать стиль для каждой границы блока по отдельности. В этом вам помогут следующие свойства:

  • border-top — стиль для верхней границы;
  • border-right — для правой границы;
  • border-bottom — для нижней границы;
  • border-left — для левой границы.
border-top: 2px solid #0000FF; border-bottom: 7px double #000080;

Итоги

Теперь, когда вы знаете, как делать границы для блоков, вы можете потренироваться в их создании. Существует масса способов кратко описать стиль, избежав чрезмерного количества строк в файле CSS. Немаловажную роль здесь играет знание принципов каскадности таблиц стилей. Рассмотрим пример.

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

div { border-right: 8px double #FF0000; border-left: 8px double #FF0000; border-bottom: 8px double #FF0000; border-top: 4px dotted #FDD201; }

Но это слишком длинная запись. Всё это можно записать короче:

div { border: 8px double #FF0000; border-top: 4px dotted #FDD201; }

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

Мини-задание

Попробуйте создать рамку для блока div с размерами 200×200 пикселей. Стили для рамки должны быть такими:

  • Верхнюю и нижнюю границы сделайте сплошнымиsolid, задайте им одинаковый цвет на выбор и ширину 5 пикселей.
  • Левую границу сделайте пунктирнойdashed, шириной 3 пикселя, цвет выберите отличный от предыдущего.
  • Правую границу сделайте двойнойdouble, шириной 7 пикселей, цвет отличный от двух предыдущих.

В конечном итоге ваша работа должна выглядеть так (за исключением цвета, который вы выбираете сами):

Результат задания (вид в Chrome)

 

Далее в учебнике: border-radius — закругленные углы в CSS.

idg.net.ua

border

The border CSS property sets an element's border. It's a shorthand for border-width, border-style, and border-color.

As with all shorthand properties, any omitted sub-values will be set to their initial value. Importantly, border cannot be used to specify a custom value for border-image, but instead sets it to its initial value, i.e., none.

The border shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand border-width, border-style, and border-color properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., border-top ) and logical (e.g., border-block-start) border properties.

Borders vs. outlines

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

  • Outlines never take up space, as they are drawn outside of an element's content.
  • According to the spec, outlines don't have to be rectangular, although they usually are.

Syntax

/* style */ border: solid; /* width | style */ border: 2px dotted; /* style | color */ border: outset #f33; /* width | style | color */ border: medium dashed green; /* Global values */ border: inherit; border: initial; border: unset;

The border property may be specified using one, two, or three of the values listed below. The order of the values does not matter.

Note: The border will be invisible if its style is not defined. This is because the style defaults to none.

Values

Sets the thickness of the border. Defaults to medium if absent. See border-width. Sets the style of the border. Defaults to none if absent. See border-style. Sets the color of the border. Defaults to currentcolor if absent. See border-color.

Formal syntax

|| ||

where = | thin | medium | thick = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset = | | | | | | currentcolor |

where = rgb( {3} [ / ]? ) | rgb( {3} [ / ]? ) | rgb( #{3} , ? ) | rgb( #{3} , ? ) = rgba( {3} [ / ]? ) | rgba( {3} [ / ]? ) | rgba( #{3} , ? ) | rgba( #{3} , ? ) = hsl( [ / ]? ) | hsl( , , , ? ) = hsla( [ / ]? ) | hsla( , , , ? )

where = | = |

Example

HTML

I have a border, an outline, AND a box shadow! Amazing, isn't it?

CSS

div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; }

Result

Specifications

Browser compatibility

Update compatibility data on GitHubDesktopMobileChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetBasic support
Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android ? Safari iOS Full support 1Samsung Internet Android ?
Full support   Full support Compatibility unknown   Compatibility unknown

developer.mozilla.org

Очередной блог фрилансера

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

Возможно это моя вина, я человек привычки, и никогда не рассматирваю подробно вещи, которые мне давно знакомы.

Так, во время чтения книги Smashing Book 2, в главе Кристиана Хейлмана был приведен пример следующего CSS-кода:

#pagetitle { border-color: black white white black; }

Первое, о чем я подумал: «Это какая-то ошибка. С каких пор свойство border-color позволяет в сокращенной форме указывать цвет для каждой границы блока?». А затем, я вспомнил, что за 10 лет разработки, я использовал это свойство один или два раза, следовательно, что я могу о нем знать? Плюс, я думаю что Кристиан, как опытный разработчик, знает о чем говорит.

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

#pagetitle { border: solid 1px black; }

Редко когда мне действительно приходится использовать свойства типа: border-color, border-style, border-left-style или любые другие версии этих длинных свойств. В 99% случаев, свойство border реализует все, что мне требуется.

В CSS-справочнике на sitepoint.com сказано:

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

Следовательно, точно так же как для свойств margin и padding, цвет для каждой границы задается в следующем порядке: верхняя граница, правая граница, нижняя граница, левая граница (по часовой стрелке, начиная сверху).

Стиль и ширина границы

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

Ну и конечно, вы можете сокращать свойства, при необходимости:

#pagetitle { border-width: 2px 1px; border-style: solid dashed; }

Снова, также как у margin и padding, мы указываем только первые два значения, а остальные просто наследуются от первых.

Запомните

Нельзя использовать эту технику мульти-объявления для сокращенного CSS-свойства border (несмотря на то, что это кажется вполне логичным). Оно применяется только к трем, указанным выше, свойствам, так что следующий код будет неправильным:

#pagetitle { /* THIS IS INVALID! */ border: solid dashed 1px 2px black white white black; }

Еще, такой метод не получится применить к свойствам outline-width, outline-style и outline-color.

Перевод статьи «Here’s Something Interesting About CSS Borders», автор Louis Lazaris

dreamhelg.ru

Как задать цвет, стиль и размер бордюра в боксах.

В языках разметки бордюр(border), имеют только таблицы, картинки и фреймы, в некоторых случаях удается задать цвет бордюра и на этом все. Каскадные таблицы стилей дают нам больше возможностей, но обо всем по порядку.

В CSS мы можем управлять шириной рамки(бордюра) при помощи border-width, а если быть точнее то мы можем управлять толщиной каждой стороны отдельно: border-top-width - толщина верхнего бордюра border-right-width - толщина правого бордюра border-bottom-width - толщина нижнего бордюра border-left-width - толщина левого бордюра Но может быть и сокращенная форма:

P{border-width:top right bottom left;} (верх право низ лево).

Ширина бордюра может задаваться:

цифрами DIV{border-width:5px}, от ноля до бесконечности, т.е. положительные.

thin - тонкий бордюр, DIV{border-width:thin} medium - средний бордюр, DIV{border-width:medium} thick - толстый бордюр, DIV{border-width:thick} С цифрами понятно, а вот с этими значениями все зависит от браузера, но все же thin

www.webuchebnik.ru


Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!