Border внутри блока css – Вёрстка. Как реализовать border внутри блока, а не на его границе? Пример в описании

Внутренняя граница в CSS. Как это сделать?

Недавно необходимо было сделать внутреннюю границу для div’a. Решил использовать стандартное значение inset для свойства border, однако оно не сработало. Тогда начал искать другое решение.

Найденное решение оказалось очень простым и сложным. Сложность его в том, чтобы к нему прийти, а легкость… Легкость в его реализации. Это к слову о том, что HTML и CSS можно выучить за неделю, но уметь с ним работать, на это надо годы практики.

Теперь о самом решении. Поскольку конструкция
.border-inset {
border: 1px red solid inset;
}

Не сработала, я нашел простое решение. Для того, чтобы сделать внутреннюю границу мы будем использовать другой подход, а именно: использовать box-shadow.

Следующий код сделает нам внутреннюю черную границу у элемента:

.border-inset {
box-shadow: 1px 1px 0 #000 inset, -1px -1px 0 #000 inset;
}

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

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

Если говорить простым языком, мы сначала сместили тень на 1px по горизонтали и на 1px по вертикали, установили степень размытия 0, задали цвет #000 (черный) и указали, что тень будет внутри нашего элемента (inset). Степень размытия у нас 0, поэтому тень будет в 1px (без размытия). Таким образом мы указали левую и верхнюю границы. Затем мы добавили еще один набор значений (с отрицательными значениями), чтобы добавить правую и нижнюю границы.

Вот и все, таким простым способом мы сделали внутреннюю границу у элемента. Применять можно как к простому div’у, так и любому другому элементу, включая изображения. Вот, кстати, еще один из способов применения тени. Здесь я верстал обычную ссылку <a>, но не совсем стандартного вида.

www.la2q.com

border | CSS — Примеры

Генератор border CSS

div {
  border: 3px none rgb(34, 34, 34);



  border-top: 3px none rgb(34, 34, 34);
  border-right: 3px none rgb(34, 34, 34);
  border-bottom: 3px none rgb(34, 34, 34);
  border-left: 3px none rgb(34, 34, 34);



  border-style: none;  
  border-color: rgb(34, 34, 34);  
  border-width: 3px;  



  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;

  border-top-color: rgb(34, 34, 34);
  border-right-color: rgb(34, 34, 34);
  border-bottom-color: rgb(34, 34, 34);
  border-left-color: rgb(34, 34, 34);

  border-top-width: 3px;
  border-right-width: 3px;
  border-bottom-width: 3px;
  border-left-width: 3px;
}

Прозрачный border CSS

Чтобы сделать прозрачный border следует цвет написать в rgba: теория, конвертер.

<div></div>

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

<div></div>

Чтобы у изображения были полупрозрачные края, сквозь которые просвечивала эта же картинка, а не фон родителя, лучше применить outline.

<img alt="голубой фон в смайликах" src="http://2.bp.blogspot.com//-c4ScvKxvKBs/TkoXOfNQFHI/AAAAAAAACLA/0x_aaffS0t0/s00/background.jpg">

Внутренний border. Управление длиной блока

Если задано width: auto;, то ширина элемента равна ширине родителя. Она не увеличивается за счёт margin, border и padding.

width: auto; (по умолчанию)

width: 100%;

В остальных случаях border, как и padding

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = ширина коробки элемента

width: 240px;

width: 120px;

width: 120px;

Пунктирная обводка внутри HTML блока

Задача: пройти пунктиром по периметру на некотором расстоянии от краёв элемента. Эффект будет такой, как будто на швейной машинке прошили полотно и остались на ткани стежки. Если у кнопки углы закругленны, фон задан градиентом или картинкой, текст должен выделяться мышкой и нужно обойтись одним тегом, то единственно верным решением будет воспользоваться :after:

какой-то текст

<div>какой-то текст</div>

Рамка в процентах

Ширина рамки border-width может устанавливаться в любых единицах измерения, но не в процентах, также как и box-shadow, и outline. Для однотонных линий можно использовать

резиновый border

<div>какой-то текст</div>

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

Эффект вдавленной линии достигается когда верхняя полоса темнее, нижняя — светлее; выпуклой наоборот.

<hr>

shpargalkablog.ru

Рамка блока в CSS

Создание рамки блока

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

Для указания ширины рамки используется свойство border-width. Оно может принимать следующие значения:

border-width: medium — средняя (по умолчанию)

border-width: thin — тонкая

border-width: thick — толстая

border-width: ширина в единицах измерения CSS

border-width: inherit — значение принимается от родительского элемента

Чаще всего ширину указывают в каких-либо единицах измерения, существующих в CSS.

Стиль рамки устанавливается с помощью свойства border-style. В зависимости от этого свойства рамки выгдядят по-разному. Далее приведены значения этого свойства и стили, которые они устанавливают.

При маленькой ширине рамка может выглядеть несколько по-другому.

Кроме указанных значений, свойство border-style может принимать следующие значения:

border-style: none — отсутствие рамки

border-style: hidden — то же, что и none, применяется к ячейке таблицы

border-style: inherit — значение принимается от родительского элемента

Цвет рамки устанавливает свойство border-color. Значением свойства является цвет, указанный одним из способов, существующих в CSS.

Создадим блок и зададим ему рамку.

Стиль:

+

<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
<style>

#div1
  {
  border-width: 1px;
  border-style: solid;
  border-color: Red;
  }

HTML код:

<div>Блок с рамкой</div>

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

Сокращённая запись

Рамку можно создать более коротким способом. Для этого существует свойство border, в котором через пробел перечисляются свойства рамки, сначала ширина, затем стиль, затем цвет. Для примера создадим блок с такой же рамкой, но установим её с помощью сокращённой записи.

<div>Блок с рамкой</div>

Если не указать ширину или цвет, то будет использовано значение по умолчанию.

Отдельные стороны рамки

Рамку блоку можно задать не целиком, а с каждой стороны по-отдельности. У разных сторон рамки может быть отдельный стиль, с одной стороны может быть рамка, а с другой может её не быть, вобщем у Вас есть полная свобода действий.

Для создания рамки с каждой из сторон соществуют свойства border-left, border-right, border-top, border-bottom. Для примера создадим блок, у которого есть рамка только слева.

<div>Блок<br>с рамкой<br>слева</div>

Создайте рамку у этого блока с других сторон с разным видом.

Для любой стороны рамки можно указать каждое свойство отдельно:

border-left-width, border-left-style, border-left-color

border-right-width, border-right-style, border-right-color

border-top-width, border-top-style, border-top-color

border-bottom-width, border-bottom-style, border-bottom-color

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

Для примера создадим блок, у которого рамка имеет со всех сторон разную ширину.

Стиль:

#div2
  {
  border-width: 5px 2px 3px 7px;
  border-style: solid;
  border-color: #D118CB;
  }

HTML код:

<div>Блок с рамкой с разной шириной</div>

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

basecourse.ru

CSS-рамка

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

Оформление рамок и границ HTML-элементов с помощью CSS-свойств

1. Стиль рамки border-style

По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.

Синтаксис

p {border-style: solid;}
p {border-top-style: solid;}

2. Цвет рамки border-color

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

Синтаксис

p {border-color: #cacd58;}

3. Ширина рамки border-width

Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none, и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.

Синтаксис

p {border-width: 2px;}

4. Задание рамки одним свойством

Свойство border позволяет объединить в себе следующие свойства: border-width, border-style, border-color, например:

div {
width: 100px; 
height: 100px; 
border: 2px solid grey;
}

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

5. Задание рамки для одной границы элемента

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

Стиль верхней границы задается с помощью свойства border-top, нижней — border-bottom, левой — border-left, правой — border-right.

Синтаксис

p {border-top: 2px solid grey;}

html5book.ru

border | htmlbook.ru

Краткая информация

Версии CSS

Описание

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

Синтаксис

border: [border-width || border-style || border-color] | inherit

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border</title>
  <style>
   .brd {
    border: 4px double black; /* Параметры границы */
    background: #fc3; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy 
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis 
    enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.
   </div>
 </body>
</html>

В данном примере вокруг слоя добавляется двойная граница. Результат показан на рис. 2.

Рис. 2. Применение свойства border

Объектная модель

[window.]document.getElementById(«elementID»).style.border

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

htmlbook.ru

border-bottom-style | htmlbook.ru

Краткая информация

Версии CSS

Описание

Устанавливает стиль границы внизу элемента.

Синтаксис

border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

Значения

none

Линия не отображается и значение ее толщины обнуляется.

hidden

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

dotted

Линия состоящая из набора точек.

dashed

Пунктирная линия, состоящая из серии коротких отрезков.

solid

Сплошная линия.

double

Двойная линия.

groove

Создает эффект вдавленной линии.

ridge

Создает эффект рельефной линии.

inset

Псевдотрехмерная линия.

outset

Псевдотрехмерная линия.

inherit

Наследует значение родителя.

Вид указанных стилей представлен на рис. 1.

Рис.1. Стили границ

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-bottom-style</title>
  <style>
   #panel {
    background: #ccc; /* Цвет фона */
   } 
   #panel p {
    padding: 5px; /* Добавляем поля */
    margin: 0; /* Убираем отступы у параграфа */
   }
   #title {
    background: navy; /* Цвет фона */
    color: white; /* Цвет текста */
    border-bottom-width: 2px; /* Толщина линии внизу */
    border-bottom-style: solid; /* Стиль линии внизу */
    border-bottom-color: white; /* Цвет линии внизу */
   }
  </style>
 </head>
 <body>

  <div>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  </div>

 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства border-bottom-style

Объектная модель

[window.]document.getElementById(«elementID»).style.borderBottomStyle

Браузеры

Браузер Internet Explorer до версии 6.0 включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

htmlbook.ru

border — граница блока | CSS справочник

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

Описание

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

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

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

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

Синтаксис

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

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

Пример

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style type="text/css">
    p { border: 5px solid red; }
  </style>
</head>

<body>
  <p>Здесь содержится какой-то текст.</p>
</body>
</html>

Результат данного примера в окне браузера:

puzzleweb.ru