Jump to content

CSS code for Text block with a colored border

Recommended Posts

Hello,

 

I want to know what is a CSS code for text block with a colored border. 

AS you can see the red marked part in the image, I already made  them using a button block but they are not supposed to be a button  but a text.    Site URL :  https://www.youjinkim.design/

So I tried this Code as below but it is not showing properly. Can you tell me how I can fix it ?

 

#block ID {
    border: 1px solid #398c66;
  padding-left: 6px;
    padding-right: 6px;

   
    border-radius: 4px;

}

 

Thank you.

 

image.thumb.png.100bf87666b37aeb4ab1d6898e85f607.png

 

So I tried this Code as below but it is not showing properly.

 

Can you tell me how I can fix it ?

 

#block ID {
    border: 1px solid #398c66;
  padding-left: 6px;
    padding-right: 6px;

   
    border-radius: 4px;

}

 

Link to comment
4 minutes ago, YOUYOU123 said:

#block ID

Did you replace #block ID with an actual block ID from your website?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

I would suggest that you should be targeting the text inside the block, more like this (not the extra p):

#block-4f598d832a9ae10b16c4 p {
    border: 1px solid #398c66;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 4px;
}

I've added a top and bottom padding as you may need to adjust that, but generally this should keep the border better centered around the text.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.