How to Add a Rounded Border with CSS ?

How to Add Text Outline with CSS?

Last Updated : 19 Nov, 2024

Since CSS does not provide a direct text-outline property, the CSS text-shadow property is used to create an outline effect around text by adding multiple shadows with offsets.

1. Using text-shadow Property

The text-shadow property is commonly used to add shadows to text, by applying multiple shadows in different directions, an outline effect is created around the text.

Syntax

text-shadow: offset-x offset-y blur-radius color;

HTML

<h1 style="text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
          -1px 1px 0 #000, 1px 1px 0 #000; color: white;">
  	This is an Outlined Text
</h1>

Output

using-text-shadow-property — using text-shadow property

An outline can also be added around the text using the -webkit-text-stroke Property.

2. Using -webkit-text-stroke Property

The -webkit-text-stroke property directly applies a stroke around the text. It is simpler and more efficient than text-shadow but only works in WebKit-based browsers like Chrome and Safari.

Syntax

-webkit-text-stroke: width color;

HTML

<h1 style="color: white; -webkit-text-stroke: 2px black;">
  	This is an Outlined Text
</h1>

Output

Using--webkit-text-stroke-Property- — Using -webkit-text-stroke Property

How to Add a Rounded Border with CSS ?

R

rr346572

Improve

Article Tags :

Similar Reads

How to replace text with CSS?

Replacing text is usually done on the server side, but in restricted environments, CSS can offer simple workarounds. Though limited, CSS techniques can handle about 10â€“15% of basic text substitution needs. We'll explore these methods and where they work best.Using :after Pseudo-elementThe :after pse

How to Add Text Shadow in Tailwind CSS?

Adding a text shadow in Tailwind CSS is useful for making text for creating visual effects like glows and embossed or debossed effects. Tailwind CSS does not provide text shadow utilities out of the box but it allows you to easily extend its functionality to add custom utilities. In this article, we

How to Add a Rounded Border with CSS ?

A rounded border in CSS gives elements smooth, curved corners instead of sharp ones. It enhances design aesthetics and is achieved using the border-radius property. This allows developers to control the curvature, creating visually appealing and modern web layouts easily.Using the border-radius prop

How to set inner text shadow with CSS ?

CSS is a style sheet language that describes the document's presentation written with HTML or similar markup languages. In this tutorial, we are going to learn how to set inner text shadows with CSS. Approach: Text shadow is used to design the text elements such as paragraphs, headings, etc. We firs

How to Set Border Opacity with CSS ?

Border opacity in CSS controls the transparency of an elementâ€™s border. While there's no direct property for border opacity, you can achieve it by using color functions like rgba() or hsla(), which allow you to specify the opacity of the border color.Syntaxborderborder: 1px solid rgba(255, 0, 0, 0.5

How to style outline buttons using CSS ?

This article will explore how to style outline buttons using CSS. The Outline buttons give a clean visual appearance. The clear and visible border ensures the clear separation from the background and other elements and enhances readability. We can achieve the outline buttons effect in two different

How to Add Shadow to Text using CSS?

The text-shadow property is used to add shadow to the text. The text-shadow property creates text shadows, specifying horizontal/vertical offsets, blur radius, and color for depth and emphasis.Note: We can customize text shadow by changing position, blur, and color for improved appearance and visual

How to Add a Gradient Overlay to Text with CSS?

Adding a gradient overlay to text can create visually appealing effects that enhance the design of a website. CSS provides various techniques to apply gradients to text. Table of Content Approach 1: Using background-clipApproach 2: Using a MaskApproach 3: Using SVGGradient Overlay to Text using back

How to Create Circle with Text in Tailwind CSS ?

To create a circle with text inside using Tailwind CSS, a utility-first framework that simplifies styling. Using Tailwind's predefined classes, you can quickly design circular elements, center the text inside, and customize the appearance all without writing custom CSS.Table of ContentCircle with te

How to indent text in HTML by using CSS ?

Text indentation in an HTML document sets the length of empty white space before lines of text in a block, typically marking the beginning of a paragraph. Proper indentation can enhance the readability and layout of your web content. Here, we will explore several common approaches for text indentati