Border Around Paragraph
-
I am trying to add a border around a paragraph on my website. I am able to change the background and text colours, but not the border.
All of point-and-click help options say to click on ‘border’ in the same place as I click on ‘background’ and ‘text colour’ but ‘border’ does not appear there for me.
I have tried copy-pasting HTML code from various sites saying ‘how to add a border’ but I always get the “This block contains unexpected or invalid content.” message.
Normally, I’m pretty good at the copy-pasting HTML and then tweaking it to match what I need it do from there, but in this case it’s not working even in the original codes.
Does it matter that we’re using the free version of WP? (so the editing the CSS is NOT an option for us).
Thank you!
The blog I need help with is: (visible only to logged in users)
-
Hey there!
I wanted to share a quick tip based on my recent experience. If you want to edit the HTML code directly on your WordPress page but encounter the error message “This block contains unexpected or invalid content,” there’s a simple solution.
You can use the Additional CSS Classes feature to target the specific block you want to edit. Just follow the steps outlined here to learn how. Once you’ve added the class, you can customize the block to your liking in either the Global Styles or Customizer section. Instructions on accessing these sections can be found here.
Just a friendly reminder: accessing the Global Styles section requires your theme to support the Site Editor. Keep that in mind as you explore and make changes.
If you have any questions or run into any challenges, feel free to reach out.
Happy blogging!
-
Thank you for the feedback.
Unfortunately, because we are using the free version of WP, we are not able to access the Additional CSS Classes to add borders in this way. And, unfortunately, because we are still recovering from COVID shutdowns, we are not in a position to add this expense to our budget at this time.
I was hoping that there was an html code that would allow me to add borders to paragraphs in this way. I know it is more steps that way, but if I can find a code that works, I am able to put in that time. Unfortunately, none of the codes I have found online seem to work.
-
Hey there!
You’re absolutely right! In the free version, the CSS custom feature isn’t available, but don’t worry, there’s still a way to accomplish what you’re aiming for. You can simply write an inline CSS style instead. Although I’d love to assist you further, I’m afraid I don’t have a clear understanding of where exactly on your website you’d like the border to be. My suggestion is to get in touch with a staff member who can provide you with more personalized support.
Also, I have some helpful posts for you to check out! They can guide you in fixing the “This block contains unexpected or invalid content” error you mentioned, using the codes you came across.
Cheers!
-
I appreciate that you tried. At the moment, we are revamping the look of our media (brochures, website, etc.) to make our different programs stand out more from each other. That process includes colour-coding. On the new, unpublished (under construction) home page, I have been trying to make text boxes with the new colours, with the fill colour a lighter tone than the border colour for each box. I can do the fill but not the border.
The process would be similar to adding a darker yellow border to the yellow text boxes on our current home page (https://wordpress.com/page/scienceforvancouver.wordpress.com/35). (under the posters)
I am happy to hear that there is a work around for the code, but I don’t know how to contact WP staff.
I will, however, check out the resources on the link you gave – THANK YOU!
I find if I keep fiddling I can often figure out which parts of the code do what and tweak to what I need, but so far, nothing I have tried has worked. I appreciate that you provided me a new avenue to explore.
-
Hey there!
Firstly, I want to apologize for the delay in getting back to you. I appreciate your patience.
So, if I understand correctly, you’re looking to have a border around a text box on your home page. However, you want the border colour to be a darker shade of the background colour of the text box, right?
Well, I’ve experimented a bit and found a solution using just a single line of CSS code. I applied it to a text box on your homepage, and here’s what it looks like:

To achieve this, you can simply use the following code:
border: solid 4px #a37a074d;
see the image below for where to add this code to your page.
This was achieved on a live version of your website using the browser inspect element tool.
I hope this helps! If you have any more questions or need further assistance, feel free to ask. I will get back as soon as I can.
- The topic ‘Border Around Paragraph’ is closed to new replies.