CSS Text Border With Padding

Question

I have read about text borders here:

In that post, they are using font-shadow to make the border, but I cannot remove the shadow colour, and I only need the border because I need to show a picture behind the space between the text and the border and create some space between the text and the border.

This is what I am trying to achieve:

This is what I have done so far (it is incorrect because the border is connected with the text):

<style>
h1 {
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>
<h1>Hello World</h1>

Sorry if you cannot understand me, what I mean is that I need a border around the text with transparent space, but I have no idea how to achieve this.

I also cannot use image as replacement of text .

Do you mean that you want a transparent border around the letters? — Sam Willis, Jan 05 '17 at 12:11
no , i want to show the border but make space between text and the border transparent — user6668201, Jan 05 '17 at 12:12

Nikunj Sardhara · Answer 1 · 2017-01-05T12:34:05.297

0

We just need to manipulate css in a correct way.

I have prepared a jsfiddle here.

You're welcome.

#text{
  font-size:30px;
  font-weight:100;
  font-family:arial;  
    color:black;
    position:absolute;
    left:4px;
    top:7px;
}
#borders{
  font-size:40px;
  font-weight:900;
  font-family:arial;
  color:white;
  -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
   }

<div id="text">M</div><div id="borders">M</div>

edited Jan 05 '17 at 12:34

answered Jan 05 '17 at 12:30

Nikunj Sardhara

638
1
5
20

as the picture : http://i.imgur.com/4dC2GiG.png , the word M is outside the border shaped like M , and i need the word M is inside the border shaped like M – user6668201 Jan 05 '17 at 12:31
Could you try in firefox? – Nikunj Sardhara Jan 05 '17 at 12:40
The solution you are asking cannot be done in one element and YOU need to adapt it to all devices my modifying it, the solution which i gave you is a POC which you should appreciate, otherwise consider using canvas or svg – Nikunj Sardhara Jan 05 '17 at 13:52

score 0 · Accepted Answer · answered Jan 05 '17 at 12:33

What you're asking for is not possible. Especially the requirement of making an outer border of transparency. While box-shadow has an inset property, text-shadow does not. Background clip can create some interesting effects in conjunction with text-shadow but nothing like what you're looking for.

span{font-size: 300px;
font-weight:bold;
font-family: Arial, 'sans-serif';
background-color: #ed5c65;
color: transparent;
text-shadow: 4px 4px 4px rgba(255,255,255,0.3);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}

<span>M</span>

https://jsfiddle.net/3ttgv3ng/

@NikunjSardhara you're doubling the text and markup. I don't think that's acceptable for a minor css effect. Although, it's up to OP to decide what works for him. — Serg Chernata, Jan 05 '17 at 12:37

score -1 · Answer 3 · answered Jan 05 '17 at 12:37

-1

Check This!

h1 {
 font-size:80px;
  /* WebKit (Safari/Chrome) Only */
  -webkit-text-stroke: 1px black;
  
  /* If we weren't using text-shadow, we'd set a fallback color
     and use this to set color instead
    -webkit-text-fill-color: white; */
    color: white;
  
  text-shadow:
    3px 3px 0 #000,
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -1px -1px 0 #000,  
    1px -1px 0 #000,
   -1px  1px 0 #000,
    1px  1px 0 #000;
}

<h1>M O H A N</h1>

answered Jan 05 '17 at 12:37

Pavan Baddi

479
1
11
22

almost like what i try to achieve , but still it's only " almost " , i will find another answer first before think about this – user6668201 Jan 05 '17 at 12:38
i also need the text anyway not just the border – user6668201 Jan 05 '17 at 12:39

CSS Text Border With Padding

3 Answers3