Is it possible to create a border around the edges of text in Webflow, rather than just around the box? If so, what is the method to achieve this?

Published on
September 22, 2023

Yes, it is possible to create a border around the edges of text in Webflow. This can be achieved using a combination of CSS properties. Here's the method to achieve this:

  1. Select the text element you want to apply the border to.
  2. In the Styles panel, go to the "Borders" section.
  3. Set the "Border" property to a value that suits your design (e.g., 1px solid black).
  4. Use the "Padding" property to create space between the text and the border, if desired.
  5. To make the border follow the edges of the text rather than the box, you can use the display: inline property. This will cause the text to behave like an inline element, and the border will only surround the text itself rather than the entire box.

Here's a step-by-step breakdown of the process:

  1. Select the text element.
  2. In the Styles panel, go to the "Borders" section.
  3. Set the desired border style, color, and width.
  4. In the "Padding" section, adjust the padding values to create space between the text and the border, if desired.
  5. Scroll down to the "Display" section and set the display property to "Inline".

By following these steps, you will be able to create a border around the edges of the text in Webflow.

Additional questions:

  1. How do I create a dashed border around text in Webflow?
  2. Can I change the color of the border when the text is hovered over in Webflow?
  3. Is it possible to create a border that only appears on one side of the text in Webflow?