Вёрстка. Как реализовать 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 тут в том, что на фоне этой рамки будет красный градиент, а не черный цвет (как снаружи).

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

Как добавить нижнюю границу формы?

Источник

How can I setup a border inside the div

I was just wondering if there’s a way to create a div with the «border» inside the div. What I mean is: I have a div of 200px for example and I want the border to be inside that 200 pixels, without exceeding. I need to achieve the effect of a div with a border not on the edge of the shape, but 5px more inside. An image can talk more than hundreds words I want this: Here is my code: http://jsfiddle.net/hpLYD/1/ The CSS:

Padding property is expanding the whole div including the border. How can I achieve that effect using only css? is it possible?

Note: The border: dashed/dotted; is not working in Firefox, it renders as solid anyway (when border-radius is applied).

6 Answers 6

You can do this using the CSS3 property box-shadow. Add the following to your CSS:

box-shadow: 0px 0px 0px 5px #f00; 

Thanks that’s exactly what i wanted, the shadow is exceeding the circle’s 200px tough, but with that property i can easily reduce it to 195px and have a 3px shadow and 2px border to keep it inside the measures! thanks.

While box-shadow is most likely the best way to go, people seem to forget that the question required that the border didn’t exceed 200px. In order to actually achieve this you can use the inset parameter on the box-shadow attribute (which will make an inner shadow).

You will also need to change the box-sizing to border-box such that the size is proportional to the border and not the content.

Thanks for introducing the box-sizing property, that’s very useful for obtaining that effect in the prefixed dimensions.

You can’t place a border within an element, however you can use box-shadow to give that effect:

Do note though that this is a CSS3 style property and isn’t supported on all browsers. You may also need to use vendor-prefixes on some browsers ( -webkit , -moz , etc). Check http://caniuse.com/#search=box-shadow for support.

I’m aware of the vendor-prefixes i didn’t use them in my example just to keep it simple, but thanks anyway for precising it, and to share that «caniuse» website, that’s very usefull! 😉

I was mentioning it more for the box-shadow property over your example code. -webkit-box-shadow and -moz-box-shadow specifically.

I suppose you could add another class to the circle.

I dont think you can add a padding to a rounded border (dont quote me on that), but I did the fiddle in about 30 seconds.

The problem is a border takes up screen real estate whether we like it or not.

If a 1px border is on 100px element, even if we could get it to appear inside, that element would now only be 98px inside. But what we are stuck with in reality is a 100px element that’s actually 102px caused by the borders on the outside. Border-box doesn’t seem to do anything to borders in latest Chrome — they always appear on the outside.

An easy way to solve this is using an absolutely positioned CSS :after or :before element, this basically means no screen space is lost by the border. See example:

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

3 Easy Ways to Place a Border Inside of a Div Using CSS

An HTML website’s style is controlled by CSS, which is also a fundamental part of HTML. One of the styling properties provided by CSS is the “border” property. Mostly borders are created outside of the elements, but CSS allows us to insert a border inside an element with the help of different properties, which are box-shadow, outline, and box-sizing.

In this article, we will learn the procedure to place borders inside the div using:

Method 1: Place a Border Inside of a Div Using “box-shadow” Property

We can place a border inside the div using the “box-shadow” property. So, first, go through the box-shadow property and its functionality.

What is “box-shadow” Property?

In CSS, the “box-shadow” property allows us to set a shadow to any element or image. This property is based on the following values:

• offset-x: It is used to add horizontal shadow.
• offset-y: It is used to add vertical shadow.
• color: It is utilized to place the color of the shadow.

To clarify these points, let’s move to the syntax of the box-shadow property:

Here is the description related to the above-mentioned values:

• “offset-x” and “offset-y” can be positive or negative.
• “blur-radius” makes the shadow brighter or lighter.
• By using “spread”, you can set the size of the shadow.
• In the place of “color”, you will assign any color you want to give to the image.
• “inset” is used to set the shadow inside the element. If you do not use it, a shadow will appear outside of the box.

Note: “blur-radius”, “spread”, and “inset” are the optional values of the box-shadow property. You can use these values in some special cases.

For a better understanding of the usage of the box-shadow property, let’s implement a practical example.

Example

In the HTML section, we will create a container using tag and heading inside it.

HTML

«Solid Border Inside The Div”

Next, in the CSS file, we will use “div” to access the already created div and place the border inside of it by follow the given instructions:

• Set the width and height of the div as “700px” and “250px”.
• Specify the text color as “rgb(13, 214, 214)”.
• Set the values for text alignment using the line-height property as “200px” and text-align property as “center”.
• By using the background property, set the background color of the div as “black”.
• Create a border using border property with “15px” width, “solid” shape, and “black” color.
• For inside shadow, use the “box-shadow” property and set the value of offset-x, offset-y, and blur as “0px”, spread as “5px”, the color of shadow as “rgb(255, 251, 0)” and use “inset” to place border inside the div.

CSS

box-shadow : 0px 0px 0px 5px rgb ( 255 , 238 , 0 ) inset ;

Note: The value of offset-x and offset-y is set as 0 because we need borders on all sides of the div.

After implementing the given code, go to the HTML file and execute it to see the following outcome:

Note: By increasing the value of the “spread”, you can increase the width of the border.

Method 2: Place a Border Inside of a Div Using “outline” and “outline-offset” Property

The “outline” property is used to set the line outside of the element. It is the shorthand property of “outline-width”, “outline-style”, and “outline-color”. The syntax of the outline property is as follows:

Here is the description related to the above-mentioned values:

• outline-width: It is used to set the width of the outline.
• outline-style: It is used to set the style of the outline.
• outline-color: It is utilized to specify the outline color.

Similarly, the “outline-offset” property is used to set the space between the edge of the element and the outline. This space is transparent. The syntax of the outline-offset property is:

In the place of value, you can set the space you want to set between the edge of the element and the outline. It creates an outline inside of the element when a negative value is specified.

Let’s move to the example of creating a border inside the div.

Example

In this example, we will create two divs with class names “div1” and “div2” and add a heading inside it using tag.

HTML

«Ridge Border Inside The Div» < / h>

«Double Border Inside The Div» < / h>

In CSS, use “div1” to access the container we have created in the HTML file. To insert the border inside of the div, follow the given instructions:

• Set the width and height of the div as “500px”.
• Adjust the border’s radius to “50%”.
• Set the color of the text as “rgb(13, 214, 214)”.
• Set the values for text alignment using the line-height property as “500px” and text-align property as “center”.
• By using the background property, set the background color of the div as “black”.
• Create a border using border property as “15px”, “solid”, and “black”.
• For the inside border, use the “outline” property and set the value as “10px”, “ridge”, and “rgb(0, 255, 242)” and set the value of “outline-offset” as “-25px” to place the border inside the div.

CSS

outline : 10px ridge rgb ( 0 , 255 , 242 ) ;

For the styling of the second div, only change the style of the outline using the “outline” property and set the values as follows:

Method 3: Place a Border Inside of a Div Using “box-sizing” Property

CSS “box-sizing” property calculates the width and height of the element. Syntax of the box-sizing property is:

In the place of value, you can set the value of box-sizing as “content-box” and “border-box”.

Example

In the below given example, we will create a div class name “div1” and add a heading inside it.

HTML

«Groove Border Inside The Div» < / h>

In the CSS, we will use “div1” to access the created div. Next, insert the border inside of the div as follows:

• Set the width and height of the div as “550px”.
• Set the color of the text as “rgb(2, 255, 137)”.
• Set the values for alignment of text using the line-height property as “420px” and text-align property as “center”.
• By using the background property, set the background color of the div as “black”.
• Create a border using border properties as “50px”, “groove”, and “rgb(81, 255, 0)”.
• Next, use the “border” property and set the value as “50px”, “groove”, and “rgb(81, 255, 0)” and set the value of “box-sizing” as “border-box” to place the border inside the div.

border : 30px groove rgb ( 81 , 255 , 0 ) ;

After implementing the given code, you will see the following output:

We have provided the three easiest ways for placing a border inside of a div using CSS.

Conclusion

To place a border inside the div, first, create a border using the “border” property, then use the “box-shadow” and “outline” with “outline-offset” and “box-sizing” properties of CSS. The border property creates a border around the element, and the other four properties can be used to move the border inside the div. As a result of this article, we have shown you the three easiest methods to place borders inside the div.
To place a border inside the div, first, create a border using the “border” property, then use the “box-shadow” and “outline” with “outline-offset” and “box-sizing” properties of CSS. The border property creates a border around the element, and the other four properties can be used to move the border inside the div. As a result of this article, we have shown you the three easiest methods to place borders inside the div.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник