Jump to content

Adding Border To Complex Shape

Recommended Posts

Hi! I am trying to create a timeline with the list section. I have it so that the cards are in a speech bubble shape and I would like it to be rounded and have a border around it. I have achieved this, however, the rounding and border is not wrapping around the entire shape. Is there a way I can accomplish that? Here is the code I'm using:

/*section the timeline is in*/
		clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 10% 90%, 0 100%);
		border:3px solid #656565;
/*These are not related to the cards, but I am listing it in case it is relevant*/
	/*arrow shape*/
	.user-items-list-carousel__arrow-icon-path {
		stroke-width: 5px;
		stroke: #33bddd;}
	/*arrow background*/
	.user-items-list-carousel__arrow-icon-background-area {
		background: #F1EFED;
		opacity: 1!important;}
	/*arrow border*/
	.user-items-list-carousel__arrow-button {
		border:2px solid #656565;}
	/*line bubbles are sitting on*/
		border-bottom:3px dashed #F1EFED;}}

Here is what it looks like:image.thumb.png.8f1deb9aa83e3fc7d749cc62505152d7.png

The bottom doesn't have that border and isn't rounded like the rest of the shape. Does anyone know a way to achieve this? Thanks so much in advanced for the help!

website: https://www.yoloyoli.art/about

password: forum

Link to comment
  • Replies 2
  • Views 254
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.