Jump to content

How to Add Dotted Border to Text Block (but only a few dots)

Recommended Posts

Site URL: https://fulltimeinfluencer.squarespace.com/fti/



How do I create a Dotted Border, with only 3 Dots and move them to the Upper Left corner?


I really want to step away from using images on Squarespace and start using CSS more. With that being said I created an image show below (the first image) that has 3 gray DOTS on the upper left hand corner, but that is an image and I'd like to do the exact same using CSS.

I was able to CSS a text box with the exact same design (second image), but I don't know how to add these dots with CSS.


Here is the code I used to achieve the same style as the image.


border: solid 1px black;
padding: 10vh;
margin: 0 auto;
border-radius: 20px;
background-color: white;
filter: drop-shadow(-10px 0px 0px #B97C78)



Screen Shot 2021-06-24 at 2.34.40 PM.png

Link to comment
  • Replies 1
  • Views 496
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • 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.