WordPress users can now access a potent web design and content development tool with the WordPress Gutenberg editor. Gutenberg’s user-friendly block-based editor offers a smooth approach to creating visually attractive web pages. The ability to border text is a frequently requested feature that can improve readability and the overall design. Unfortunately, by default, Gutenberg doesn’t have a feature to do that.
Without the help of any third-party plugins, this tutorial will walk you through the process of adding borders around the text in Gutenberg.
Steps to Add Border to the Text in Gutenberg
Step 1: Add the Additional CSS Class
First, we will add a unique CSS class name to the text blocks (Paragraph, Heading, etc).
Go to the Gutenberg WordPress editor to create new content (page/post) or select your existing content. Afterward, choose any block you want to add the border to. In this example, we will add the border to the Heading block.

Next, go to the Block settings -> Advanced. Next, add your CSS class specified into the ADDITIONAL CSS CLASS(ES) input field. You can add the class name "text-border
“.

Step 2: Add the Additional Custom CSS
Once you have a unique CSS class name for the block you want to add a border. Next, you need to add additional custom CSS to your WordPress site.
On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS. Copy the CSS snippet below and paste it into the input field.
Note: If you’re using a block theme, click here to learn how to enable Theme Customizer on your WordPress.
.text-border { border-style: solid; border-width: 3px; border-color: #0046e8; padding: 10px; display: inline-block; }

Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.
Next, return to the WordPress Gutenberg editor and preview your page in a new tab to see the result.

That’s it. If you’re happy with the result (as in the image above), you can keep it like this and save or publish your content if you want to. You can also modify the border by editing the property values on the additional CSS snippet, such as the border style, width, color, etc.
The Bottom Line
Finally, knowing how to apply borders to text in Gutenberg is a valuable skill that can improve the aesthetics of your WordPress website pages. You have learned a technique to get the desired effect by following this thorough tutorial only using custom CSS without the help of any third-party plugins. Therefore, start playing with borders in Gutenberg to advance your website design!