Text border using css (border around text)

css text-stroke outside
html border around text only
border css
css text outline generator
text-shadow css
border-color css
css text halo
rounded border css

Is there a way to integrate a border around text like the image below?

Use multiple text shadows:

text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
<h1>test</h1>

CSS Font Border?, Use multiple text shadows: text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -​2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px  Sometimes we need to create text and adding the outline to the text. There are mainly two methods to create a border to the fonts which are listed below: Using text-shadow property; Using text-stroke property; Method 1: Using text-shadow property: The text-shadow property is used to add font border or shadow to the text. Syntax:

Sure. You could use CSS3 text-shadow :

text-shadow: 0 0 2px #fff;

However it wont show in all browsers right away. Using a script library like Modernizr will help getting it right in most browsers though.

Text border using css (border around text), Let's toss on a WebKit stroke, the all-around text-shadow stroke, as well as a The solution is just not to go too crazy with the thickness of your stroke border and  The right tool exists, it's SVG <text> The browsers' support problem worth nothing in this case, 'cause the usage of text-shadow has its own support problem too, filter: progid:DXImageTransform can be used or IE < 10 but often doesn't work as expected. To me the best solution remains SVG with a fallback in not-stroked text for older browser:

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

Adding Stroke to Web Text, How to wrap the text around an image using HTML and CSS ? property: The text-shadow property is used to add font border or shadow to the text. Syntax:. CSS Border Width. The border-width property specifies the width of the four borders. The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick. The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).

I don't like that much solutions based on multiplying text-shadows, it's not really flexible, it may work for a 2 pixels stroke where directions to add are 8, but with just 3 pixels stroke directions became 16, and so on... Not really confortable to manage.

The right tool exists, it's SVG <text> The browsers' support problem worth nothing in this case, 'cause the usage of text-shadow has its own support problem too, filter: progid:DXImageTransform can be used or IE < 10 but often doesn't work as expected.

To me the best solution remains SVG with a fallback in not-stroked text for older browser:

This kind of approuch works on pratically all versions of Chrome and Firefox, Safari since version 3.04, Opera 8, IE 9

Compared to text-shadow whose supports are: Chrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 9, it results even more compatible.

.stroke {
  margin: 0;
  font-family: arial;
  font-size:70px;
  font-weight: bold;
  }
  
  svg {
    display: block;
  }
  
  text {
    fill: black;
    stroke: red;
    stroke-width: 3;
  }
<p class="stroke">
  <svg xmlns="http://www.w3.org/2000/svg" width="700" height="72" viewBox="0 0 700 72">
    <text x="0" y="70">Stroked text</text>
  </svg>
</p>

CSS, First example with text surrounded by a red border. This example also has multiple lines. To create the above example, the below code was used. The code above is a good example why a CSS code should be minified but needs to be separated line by line for editing. I played around with the '-webkit-text-stroke' property (mainly to make fonts look nicer on UGLY UGLY windows) Yet this made the loading times way too long and even crashed my site (mac Chrome 16).

The following will cover all browsers worth covering:

text-shadow: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */

How to create a colored border around text with HTML and CSS, New chapter, new set of CSS properties. Here, we're going to look at the borders and shadowing effects that can be applied both to the text and the blocks  Actually, this CSS isn't enough. For example, if you're using JQueryUI tabs, the ugly blue border appears after you click on a tab, if you just use your CSS. You do need to add a:focus or li:focus, to prevent the border. – Mike Gledhill Dec 30 '14 at 13:16

Borders and shadowing, In this case, a border will appear around the block level element you are creating. h3{. background: #00F; font-size: 2.4em; text-align: center; border: 2px solid  Remove the outline and add a border style using the :focus and :active pseudo-classes with the <input> field. You can also remove the default borders on specific sides by setting them to "transparent". Example of styling the border around the text input boxes using :focus and :active pseudo-classes:

How to create a colored border around text with HTML and CSS , This property is only supported by WebKit-based browsers and that too on using the -webkit- prefix. HTML. <p id="example1">This text has stroke  Use the following syntax to remove the border of text box and remove the highlighted border of browser style. Css Code input { background-color:transparent; border: 0px solid; height:30px; width:260px; } input:focus { outline:none; }

Adding Outline to Text Using CSS, Using CSS to Draw a Border Around Your Block of Text and Pictures. Let's say that you have some text or pictures that you want to enclose in a box. Create the  You can use CSS3 to draw borders around any HTML5 element. You have some freedom in the border size, style, and color. Here are two ways to define border properties: using individual border attributes, and using a shortcut. Borders don’t actually change the layout, but they do add visual separation that can be appealing, especially …

Comments
  • WORTH NOTING: Please test cross-browser capabilities of these methods... Am having serious issues with clients on IE at least 9.. kinda thinking of going the PNG way.
  • @ErickBest The second link does mention IE9 problems. Though this page wasn't hard to find on google caniuse.com/css-textshadow
  • Causes bad display for text with transparency (using rgba).
  • I already tried that sir but I what I need is a solid white around text.
  • Can you also add an explanation?
  • thank you for sharing your solution. I think your right it is more flexible. But most of the time it is more efficient to use CSS. I will try to use SVG later.