Setting Border inside DIV Element

border | CSS

Cвойство border (w3.org) позволяет установить толщину, стиль и цвет границы элемента.

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: теория, конвертер.

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

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

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

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

В остальных случаях border , как и padding , расширяет коробку элемента. То есть если неправильно рассчитать width , то блок переместится вниз, не поместившись в ограниченное пространство, меню будет некрасиво удлиняться и т.п..

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

Дабы сделать так, чтобы рамка не увеличивала блок, нужно указать box-sizing: border-box; . Тогда border и padding не будут влиять на ширину контейнера элемента.

border: 10px solid yellow;
padding: 10px;
box-sizing: border-box;

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

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

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

Ширина рамки border-width может устанавливаться в любых единицах измерения, но не в процентах, также как и box-shadow , и outline . Для однотонных линий можно использовать background . Из-за того, что не хочется лишаться padding , нужен ещё и :after :

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

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

Источник

Как сделать границу внутри элемента div с помощью CSS

Если вы хотите нарисовать границы внутри прямоугольного блока, есть очень простое решение — просто используйте CSS-свойство outline вместо border и переместите его внутри рамки элемента, используя свойство CSS3 outline-offset с отрицательным значением.

Однако это решение не подойдет для элементов со скругленными углами. Но вы все равно можете рисовать границы внутри круглого прямоугольника или элемента с закругленными углами, используя свойство box-shadow .

Давайте посмотрим на следующий пример, чтобы понять, как это работает:

     .box < width: 180px; height: 180px; background: black; margin: 20px 50px; >.circle < border-radius: 50%; >.inner-border < border: 20px solid black; box-shadow: inset 0px 0px 0px 10px red; box-sizing: border-box; /* Включаем отступ и границу в ширину и высоту элемента */ >/* Решение CSS3 только для прямоугольной формы */ .inner-outline 
Граница внутри прямоугольной и круглой формы
 
Контур внутри прямоугольной формы
  

Читайте также

Похожие примеры:

Источник

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

Хочу избавиться от фона-картинки, градиент сделаю через box-shadow в css, но как сделать пунктирную линию?

Нужно обойтись одним тегом, чтобы потом это скормить jqueryui.com/demos/button/
Есть идеи?

Простой 1 комментарий

Так получиться должный эффект, обратите внимание, тень должна смотреть во все 4 стороны что бы не испортить фигуру.

min-width: 100px; background: #aa0808; border: #fff dashed 1px; border-radius: 5px; box-shadow: inset #e20b0b -1px 26px 26px -13px, 0px 1px 0px #aa0808, 0px -1px 0px #e20b0b, 1px 0px 0px #aa0808, -1px 0px 0px #aa0808; text-align: center; color: #fff; text-shadow: #393939 1px 1px 0px; padding: 4px 10px 5px 12px;

Получилось вот что 🙂

Дополню CaptainQuazar. 4 тени не нужны, достаточно одной.

вроде не то, границу рисует без отступа от края блока. отличается от border только тем, что занимает место внутри самого блока, а не прибавляет снаружи…

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

Войдите, чтобы написать ответ

Как поменять цвет текста при выборе radio кнопки?

Источник

How to Add Border Inside a Div

Next, see an example, where we place a border and an outline inside a element.

Example of placing a border and an outline inside a element:

html> html> head> title>Title of the document title> style> .box < width: 180px; height: 180px; background: #d9dbda; margin: 20px 50px; > .inner-border < border: 20px solid #d9dbda; box-shadow: inset 0px 0px 0px 10px #969696; box-sizing: border-box; > .inner-outline < outline: 10px solid lightblue; outline-offset: -30px; > style> head> body> h2>Border inside a Div h2> div class="box inner-border"> div> h2>Outline Inside a Div h2> div class="box inner-outline"> div> body> html>

In the example above, we used the outline property instead of the border and then moved it inside the box using the outline-offset property (with a negative value).

Источник

Set Inner Border in CSS

1. Use the box-sizing Property to Set the Inner Border in CSS
2. Use the box-shadow Property to Set the Inner Border in CSS
3. Use the outline and outline-offset Properties to Set the Inner Border in CSS

In this article, we will introduce methods to set borders inside of a container in CSS. The border inside of a container is called the inner border.

Use the box-sizing Property to Set the Inner Border in CSS

When we add a border or padding to an element inside a container, the size of the container will grow. The size will differ from the initial one. To eliminate the problem, we can add an inner border to the container.

The inner border is a space created between border and outline property or element. We can apply an inner border to table content, images, and text of paragraphs and headers. An inner border can be of any shape like rectangular, square, circular, etc.

The inner border will not increase the size of the container, and the predefined size will be constant. We can use the box-sizing property to create an inner border in CSS. Setting the box-sizing property to border-box will include the border and padding within the dimension of the container.

For example, style a div by setting the box-sizing property to border-box . Set the height and width of div to 200px . Next, create a solid border of 10px width and red color. Then, set the background property to green .

Here, we have created a div with dimensions of 200×200 px . Even if we added a border of 10px , the container’s dimension did not change. The border lies within the container. Thus, we can use the box-sizing property to set the inner border in CSS.

div   box-sizing: border-box;  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  width: 200px;  height: 200px;  border: 10px solid red;  background: green; > 

Use the box-shadow Property to Set the Inner Border in CSS

Another way of achieving the inner border is to use the box-shadow CSS property. Using the property, we can specify the inset shadow that would look like an inner border rather than a shadow.

We can set the horizontal and vertical offset values for box-shadow as the first two values. The other three values, blur , spread , and color , are optional. We can set the spread radius to the desired value to create a shadow. Then, using the inset option will change the outer shadow to the inner shadow. The shadow will fall inside the container. Finally, it looks like an inner border.

For example, set the height and width properties of div as 200px . Set the background color to green. Then, use the box-shadow property and set the first three options to 0px . Set spread radius, the fourth option to 10px . Give the color red and set the inset option.

Here, we created an inner border with the width of 10px using the box-shadow property.

div   width:200px;  height:200px;  background-color:green;  box-shadow:0px 0px 0px 10px red inset; > 

Use the outline and outline-offset Properties to Set the Inner Border in CSS

We can set the inner border using the outline and outline-offset properties in CSS. The outline property describes the element’s border size, border type, and border color. The outline-offset property describes the distance or space between the border and outline element.

For example, set the height and width of the div to 200px . Give green color as the background. Next, set outline as 5px solid red . Then, set outline-offset to -5px .

Here, the outline property creates an outer border in the container. Using the outline-offset property and setting it to the negative value of the width of the border will change the outer border to the inner border.

div   width: 200px;  height: 200px;  background: green;  outline: 5px solid red;  outline-offset: -5px; > 

Источник