[Resolved] How to implement a border

[Achim Klein]

I’d like to implement a border left and right of the complete content to seperate optical between content and background. I tried border padding and margin with different classes, but without any success.
With .inside-header it’s getting smaller, with .container it’s getting wider. For the navigation bar I didn’ find any possibility.

Could you help me? Thanks a lot in advance.

[Tom]

How about something like this?

.inside-article {
      border: 1px solid #DDD;
}

[Achim Klein]

Hi Tom,

many thanks for the very quick answer.
With content I meant the complete site except the background, but inclusive the header, the navigation and the footer.

.inside-article is only for the main article.
Is there another class which I didn’t find?

[Tom]

Give this a try:

.container {
     border: 1px solid #DDD;
}

It may need a little tweaking, but that should be the element you’re looking for 🙂

[Achim Klein]

Thanks for the tip.
Whether it was not exactly what I’m looking for, I found a solution.
It was a combination of some classes:

.site-header {
	border-left: 40px solid #ABC6C9;
	border-right: 40px solid #ABC6C9;
}
.main-navigation {
	border-left: 40px solid #ABC6C9;
	border-right: 40px solid #ABC6C9;
}
.container {
	border-left: 40px solid #ABC6C9;
	border-right: 40px solid #ABC6C9;
}
.site-footer {
	border-left: 40px solid #ABC6C9;
	border-right: 40px solid #ABC6C9;
}

[Tom]

Glad you found a solution! That’s a lot of border! 😉

[vemvem6]

I found this topic from search and it did MOST of job for me with

`.inside-article { border: 1px solid #DDD; }’

However, the section “leave a comment” is not addressed here (and the border effect is not applied). How can I target it with CSS?

Thanks!

[Leo]

This selector should work: .comments-area

[vemvem6]

Awesome, thanks! Works like a charm 🙂

[Leo]

No problem 🙂

[jeremy]

HI IM TRYING TO ADD A BORDER TO MY WEBPAGE AROUND EVERYTHING INCLUDING HEADER IMAGE. I INSERTED THIS CSS BUT THE HEADER IMAGE HAS NO BORDER

.site-header {
border-left: 20px solid #222222;
border-right: 20px solid #222222;
}
.main-navigation {
border-left: 20px solid #222222;
border-right: 20px solid #222222;
}
.container {
border-left: 20px solid #222222;
border-right: 20px solid #222222;
}
I WAS WONDERING THE WIDTH OF MY HEADER MAY BE SOMETHING TO DO WITH THIS ITS CURRENTLY SET AT 1300 PX
PRETTY NEW TO CSS PLEASE BE GENTLE

[Tom]

Have you considered doing something like this?: https://docs.generatepress.com/article/adding-a-container-wrapper/

[jeremy]

Thanks for swift reply howecer this method dont seem to do anything i will have a play with it some more

[Tom]

Once you’ve added the container div, you can apply a border to it which will surround every element within it. It should work perfectly for what you’re after 🙂

[jeremy]

cheers i played around a bit and added this
body { border: 14px solid #222222}
this seems to have done the trick. trouble is more luck than knowledge

[Author]

Posts