[Support request] CSS for border around text

[Chandra]

I have to admit that I am rusty with CSS.

I’m trying to create a border around selected text sections on a page.

The purpose behind this is to separate various h2 sections for the purpose of reviewing them. Think top-5 reviews.

Here’s an example to show you what I mean: https://bestllcservices.com/

I want basically to do the same thing.

I downloaded and installed the CSS plugin. I tried adding the css code you’ve presented to others on here.

Can you walk me step-by-step through the process. Treat me like I know nothing.

I think it would be extremely valuable for others on my level.

Thanks,

Chandra

[Ying]

Hi Chandra,

The CSS for adding boarder is super simple, the difficult part is to find the right CSS selector.

Can you link us to your site and point us to the sections that you want to add border to?

Let me know 🙂

[Chandra]

So I’m just playing around with the site at the moment. I haven’t really added content to it yet.

The site is: http://www.TheGreenCent.com

Could you give me an example of how I would create a 6 px blue border around the first two paragraphs on the sample page?

Once I do this once, I’ll feel like I can do it moving forward.

Thanks for the quick response back, btw…

Chandra

[Ying]

There’s no class added to a normal paragraph block.

As you can see in html, it’s just ap. This kind of element is very difficult to target.
https://www.screencast.com/t/5bfWlHAwti

So if you want to target it, you can add a class border-text to it, please refer to the screenshot below:
https://www.screencast.com/t/Wo7l7KLa

Then you can try some CSS like this:

p.border-text {
    border: 6px solid blue;
}

Let me know if this helps 🙂

[Chandra]

Hi,

Your help has been spot-on! Thanks for that.

I’ve been playing around with the css but I am a bit frustrated, because I’m trying to contain an h2 and paragraph and an image inside the border.

How would I do this?

Thanks,

Chandra

[Elvin]

Hi Chandra,

Can you specify an instance on your site where you want this to be applied on?

So we can inspect it and get the proper selector that wraps all the image, h2 and p tags. 🙂

[Chandra]

Yeah, so I’m creating a new site. I basically want to create something very similar to what you see here: https://bestllcservices.com/

I want to contain a CTA button, image, h2, and paragraphs all within the same border. I want to do this to separate out one company being reviewed, from another. Just like what they’re doing at https://bestllcservices.com/

[Ying]

In this case, I would recommend to use Generateblocks plugin as block editor.
https://wordpress.org/plugins/generateblocks/

I think the Container block from Generateblocks is what you are looking for, you can add all these images/text to a Container block, and you won’t need to write CSS, it comes with built-in border settings.
https://docs.generateblocks.com/article/container-overview/

[Author]

Posts