Search

How to Add Border to a Text in Gutenberg

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!

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment