# Tutorial: Adding Text Outlines to Your Webflow Projects

Tutorial3 minPublished on Apr 25, 2023Updated on ![Text with a yellow stroke on Webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67116b95ea1f0bf39f35fb07_64760069e93084646c9ef4e7_og-stroke.webp)Table of contents

[

Copied](#)[

](#)[

](#)[

](#)
- [H2 Example](#)

Use AI to summarize this article[

ChatGPT](#)[

Claude](#)[

Grok](#)[

Perplexity](#)[

Google AI](#)Key pointsIn this tutorial, you will learn how to apply the **new Webflow feature** that allows you to add a text stroke to your Webflow texts.

## How to add "borders" to Webflow text

### Step 1: How to add a text stroke

To add a text stroke to a text element (such as a text block, paragraph, or heading), simply follow these steps:

- **Select the text element** (or its CSS class) or the parent element containing multiple text elements in your navigator.
- Go to the Style panel: **Style panel > Typography > More type options**
- Adjust the stroke width (px) and color in the **Stroke** section.

![Webflow interface showing how to add a stroke and color to text](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67116b95ea1f0bf39f35fb10_64760069e93084646c9ef4e8_create-stroke-webflow.webp)In just 2 clicks.

The text stroke will appear on the text of the selected element. Note that the stroke color is automatically set to the font color unless specified at a higher breakpoint.

### Step 2:  Modify the text stroke for different devices

If you want the text stroke to appear differently based on screen size (desktop, tablet, mobile), you can adjust the style (CSS) of the text stroke at different breakpoints.

![Webflow interface showing how to add a stroke and color to text on a tablet responsive view.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67116b95ea1f0bf39f35fb0d_64760069e93084646c9ef4e9_for-responsive.webp)

**Conclusion: **

With this **new Webflow feature**, you can now add text strokes to your projects for a more visually appealing and dynamic look. Feel free to experiment with different colors and widths to find the style that best suits your design.

Find more tips and tutorials on the [Webflow agency Digidop blog](/blog) to enhance your projects and develop your skills on the revolutionary no-code tool, Webflow.

[

](#)![Florian Bodelot](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/678a725470105160732b0a8a_florian-website-vf.webp)Florian BodelotCo-founder[

](/team/florian-bodelot)[

](https://fr.linkedin.com/in/florian-bodelot-digidop)[

](https://twitter.com/florian_bodelot)+1200 readers

## Stay ahead of the curve!
Subscribe now for expert insights.

[Subscribe

](https://digidop.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Preview Newsletter

](https://digidop.substack.com/)

## Suggested articles

![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab922fa556f97c19ea7db9a_Best%20B2B%20SaaS%20Agencies%20in%202026_EN.webp)DocumentationAll blog post

### Top 20 Web & Digital Agencies for B2B SaaS in 2026

[Top 20 Web & Digital Agencies for B2B SaaS in 2026](/blog/best-b2b-saas-agencies)Top 20 Web & Digital Agencies for B2B SaaS in 2026![Webflow Source interface showing AI agents, website editing, and role-based Views in a unified workspace.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDevelopmentAll blog post

### Webflow launches Source. Our take on this shift.

[Webflow launches Source. Our take on this shift.](/blog/webflow-launches-source)Webflow launches Source. Our take on this shift.![Citation rate by AI platform: ChatGPT 100%, Perplexity 100%, Gemini 67%, and Claude 0%.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationAIAll blog post

### Make Your Website Visible in ChatGPT, Perplexity, and AI Answers

[Make Your Website Visible in ChatGPT, Perplexity, and AI Answers](/blog/make-your-website-visible-in-chatgpt-perplexity-and-ai-answers)Make Your Website Visible in ChatGPT, Perplexity, and AI Answers[See all articles

](/blog)Every great website  
starts with a conversation[Talk to an expert

](/contact)[Book a call

](/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)