Is it possible to have a div that has an offset border only on the left & right?

pulgoki · March 09, 2022, 09:29:05 AM

I'm trying to create an offset border around a div and I've been able to do that following some information on the net.

I'm trying to make it so the border is *only* on the left and the right, not all around, and offset from the edge say 5px or so.

Is that even possible?

Kindred · March 09, 2022, 10:15:08 AM

border-right: 1px solid red;
margin-right: 5px;
border-left: 1px solid red;
margin-left: 5px;

Antechinus · March 09, 2022, 03:26:05 PM

Anything is possible with enough trickery. When you say "offset by 5px or so":

Do you mean a basic 5px thick border each side of the div?

Or do you mean a veritcal bar, 5px from each side of the div?

pulgoki · March 12, 2022, 09:06:01 AM

A 1px vertical bar 5px from the edge of the div.

Antechinus · March 12, 2022, 02:30:34 PM

Ok, can be done. There are a few ways you can handle it. Which method you use will depend on the situation.

Perhaps the easiest is to simply nest the div inside another div (or whatever). Set 5px left and right padding on the outer container, with no background colour, and set left and right borders on it as well. The inner div will now the way you want it to look. You can set a margin on the outer container to space it from any other elements on the page. Doing it this way is simple, straightforward, and pretty much bulletproof.

If you don't want to add extra container divs to the markup you can still get the same look. If the background to the interface (or to this part of it) has a solid colour you can use a border and box-shadow on your div instead. Example:

Code Select

<body>
	<div id="style_this">
		Div content goes here.
	</div>
</body>

You can set a left and right 5px border on your div, and colour it to match the body background, which makes it effectively invisible. Then use box-shadow like this:

Code Select

body {background-colour: white;}
div {border: solid white; border-width 0 5px; box-shadow: -1px 0 0 green, 1px 0 0 green;}

Setting box-shadow blur radius to 0 makes it into a solid bar with clean edges. Setting Y axis to 0 keeps it horizontally in line with your div. The result will appear to be a 1px solid bar offset 5px from your div.

If neither of those are practical in your particular suituation it is possible to get even trickier.

The next step up would be to use pseudo elements. You can use ::before or ::after as is convenient. The catch is that if you want to do it using pseudos the CSS becomes a bit more complex, and I'd want to know exactly what the situation was before deciding on the best option.

Kindred · March 12, 2022, 04:13:08 PM

Didn't I just post the exact css above??

Antechinus · March 12, 2022, 04:45:18 PM

No. You posted the CSS for something else.

He doesn't just want a left and right border, with a margin outside the border, which is what your CSS would do.

Kindred · March 14, 2022, 07:19:10 AM

That is exactly what he asked for, though....

Antechinus · March 14, 2022, 01:49:45 PM

No. He asked for the margin "inside" the left and right "borders". Which is a trick that can still be done just wth actual real borders, under certain circumstances, if you apply enough trickery.

Kindred · March 14, 2022, 10:01:51 PM

Hmm. That's not how I read it... but a buffet inside the borders would just be padding. No need for trickery

Antechinus · March 15, 2022, 03:44:11 PM

I asked for an explanation of what was wanted, since it wasn't initially clear to me either.

What trickery you need depends on what look you are after. If the div itself otherwise has no visible background or borders, your suggestion will work. If the div itself is a visible part of the presentation, then you will need a certain amount of trickery.

My assumption was that the div was visible, otherwise he would have just used a standard border and padding, as you say. This is implied by him apparently not being able to get the result he wanted, even though he seems to know about setting borders on divs.

Like I said to him, I would need to know the exact situation before deciding on the best option.

News:

Is it possible to have a div that has an offset border only on the left & right?