How do I get this border?

Hi there,

Please link us to the live site that shows the example.

I put it in the private window.

Can you also link us to your site and point out where you want to apply this border to?

Yes. I'll notate it in the private section.

Do you want something like this?
https://www.screencast.com/t/Z7MXE5Qe

If so, try these steps:

1. Set the headlineblock align left.

2. Add this CSS:

p.gb-headline.gb-headline-c3626160 span.gb-headline-text {
    background-color: black;
    padding-left: 1em;
    padding-right: 0.5em;
    position: relative;
    margin-left: -1em;
}
 p.gb-headline.gb-headline-c3626160 span.gb-headline-text:after {
    position: absolute;
     content: '';
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 1.5em 0 0 1.5em;
     border-color: transparent transparent transparent #000;
     top: 0;
     right: -1.5em;
}
 p.gb-headline-c3626160 .gb-icon {
    z-index: 2;
}

3. Add bottom border for the headlineblock under spacing section.

Yes that's what I want. I'm sorry....I'm not getting step 3.

Still not sure about step 3 but this is not working.

Select the headlineblock (Baseball), set its bottom border size to 2 or any size you want:
https://docs.generateblocks.com/article/headline-overview/#spacing

Hmmm....unfortunately this is not doing anything for me.

Hi there,

after setting the Bottom Border on the Headline Block, go to the Color settings and give it a Border Color

I've done that but the CSS doesn't give me that shape I am looking for.

1. Set the headline block to align left.

2. I'm not seeing a bottom border added to the headline block, can you make sure?
https://www.screencast.com/t/Vt1ZrMeARRy

I am doing this on a page that is not published yet. I've done all the steps that you have advised and it still does not have that shape.

Hi Heath,

If you would like this dynamically to any Headline you want, kindly add class my-custom-headline to the Headline Block as such: https://share.getcloudapp.com/4guKGyGL

Then replace the current CSS code with this:

.my-custom-headline span.gb-headline-text {
    background-color: black;
    padding-left: 1em;
    padding-right: 0.5em;
    position: relative;
    margin-left: -1em;
}
.my-custom-headline span.gb-headline-text:after {
    position: absolute;
     content: '';
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 1.5em 0 0 1.5em;
     border-color: transparent transparent transparent #000;
     top: 0;
     right: -1.5em;
}
.my-custom-headline .gb-icon {
    z-index: 2;
}

Now, add the Border Bottom as such: https://share.getcloudapp.com/2NuzoXQe

Kindly let us know how it goes. :)