Html css text with border

CSS Font Border?

With all the new CSS3 border stuff going on ( -webkit , . ) is it now possible to add a border to your font? (Like the solid white border around the blue Twitter logo). If not, are there any not-too-ugly hacks that will accomplish this in CSS/XHTML or do I still need to fire up Photoshop?

12 Answers 12

Another possible trick would be to use four shadows, one pixel each on all directions, using property text-shadow :

But it would get blurred for more than 1 pixel thickness.

this worked for me pefrectly, I added only 1px «blur»:text-shadow: -1px 0 1px black, 0 1px 1px black, 1px 0 1px black, 0 -1px 1px black

Note: there is a bug with the Andriod browser (code.google.com/p/android/issues/detail?id=7531), if you set the «blur» to be 0px, then no outline appears at all.

btw, you can find this code in W3C CSS tip page w3.org/Style/Examples/007/text-shadow.en.html (under DRAWING LETTERS AS OUTLINES part)

I’ve found this works best on a color background and @pixelass’s answer works best with an image background

UPDATE

Here’s a SCSS mixin to generate the stroke: http://codepen.io/pixelass/pen/gbGZYL

/// Stroke font-character /// @param $stroke - Stroke width /// @param $color - Stroke color /// @return - text-shadow list @function stroke($stroke, $color) < $shadow: (); $from: $stroke*-1; @for $i from $from through $stroke < @for $j from $from through $stroke < $shadow: append($shadow, $i*1px $j*1px 0 $color, comma); >> @return $shadow; > /// Stroke font-character /// @param $stroke - Stroke width /// @param $color - Stroke color /// @return - text-shadow @mixin stroke($stroke, $color)

YES old question.. with accepted (and good) answers..

BUT. In case anybody ever needs this and hates typing code.

THIS is a 2px black border with CrossBrowser support (not IE) I needed this for @fontface fonts so it needed to be cleaner than previous seen answers. I takes every side pixelwise to make sure there are (almost) no gaps for «fuzzy» (handrawn or similar) fonts. Subpixels (0.5px) could be added but I don’t need it.

Long code for just the border. . YES.

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

Источник

Text in Border CSS HTML

I’d like to have a div that looks like this: Is this possible to do with HTML + CSS? I will also be animating this div with jQuery. When the div is hidden I would like the title and the top line to show.

10 Answers 10

Yes, but it’s not a div , it’s a fieldset

I don’t see why it is a workaround, to me it is a solution. What functional difference does it make whether it’s a div or a fieldset?

@Bazzz- it’s wrong semantics. «The fieldset element represents a set of form controls optionally grouped under a common name.» — HTML5 spec. Where are the controls? What we actually need is a display:fieldset CSS setting. Sadly there isn’t one.

@Alohci Agree! Though, I don’t think the OP said there won’t be any form controls in the fieldset. It could still be that he wants to put form controls inside 🙂

You can do something like this, where you set a negative margin on the h1 (or whatever header you are using)

Note: you need to set a background as well as a width on the h1

To make it work with hiding the div , you could use some jQuery like this

I dont like this answer it has many constraints: the top margin is related to the font size of the h1, what if the font size changes later, you’d need to update all the margins. background: white prevents any background image from being visible throught the h1, it feels a little inflexible. I just have a feeling that using this approach is like opening up for more styling issues later. just my thought.

I like this. Is there a way to hide the side and bottom border when the div inside is hidden? jsfiddle.net/ZgEMM/3

What I was asking was how to keep the top border and hide the other three, but I decided not to do that. This is what I ended up going with: jsfiddle.net/ZgEMM/10

You will have problems if someone tries to print this page as browsers typically omit backgrounds by default.

Today I discussed this problem with a colleague. To prevent the issue from defining a fixed width (titles vary in length), we just used floating. So instead of width: XXpx; we use float: left; .

I know a bit late to the party, however I feel the answers could do with some more investigation/input. I have managed to create the situation without using the fieldset tag — that is wrong anyway as if I’m not in a form then that isn’t really what I should be doing.

/* Styles go here */ #info-block section < border: 2px solid black; >.file-marker > div < padding: 0 3px; height: 100px; margin-top: -0.8em; >.box-title

This can be viewed in this plunk:

What this achieves is the following:

• no use of fieldsets.
• minimal use of CSS to create effect with just some paddings.
• Use of «em» margin top to create font relative title.
• use of display inline-block to achieve natural width around the text.

Anyway I hope that helps future stylers, you never know.

Despite being a little more complex than I’d like, I really like this answer because it isn’t another CSS hack or bad practice. +1

Firefox, loads up and works perfect in Chrome. I was hoping an html/css demo wouldn’t require much more, but Chrome is pretty standard sure. Glad to see an answer with an aside/section tag.

@HoldOffHunger I may a slight improvement which may help Firefox, however I see that plunkr is going through some Alpha phases right now so it may not be 100%.

Text in Border with transparent text background

.box < background-image: url("https://i.stack.imgur.com/N39wV.jpg"); width: 350px; padding: 10px; >/*begin first box*/ .first < width: 300px; height: 100px; margin: 10px; border-width: 0 2px 0 2px; border-color: #333; border-style: solid; position: relative; >.first span < position: absolute; display: flex; right: 0; left: 0; align-items: center; >.first .foo < top: -8px; >.first .bar < bottom: -8.5px; >.first span:before < margin-right: 15px; >.first span:after < margin-left: 15px; >.first span:before , .first span:after < content: ' '; height: 2px; background: #333; display: block; width: 50%; >/*begin second box*/ .second < width: 300px; height: 100px; margin: 10px; border-width: 2px 0 2px 0; border-color: #333; border-style: solid; position: relative; >.second span < position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; >.second .foo < left: -15px; >.second .bar < right: -15.5px; >.second span:before < margin-bottom: 15px; >.second span:after < margin-top: 15px; >.second span:before , .second span:after

 
 
YOUR TITLE
 
Lorem ipsum dolor sit amet, est et illum reformidans, at lorem propriae mei. Qui legere commodo mediocritatem no. Diam consetetur.
 

You can use a fieldset tag.

    
 
Personalia:
 Name:  
Email:  
Date of birth:
  

For a duplicate, here another option with transform, no fieldset ( and rounded border required in the duplicates) :

Question

Help. I am not great at UX. I am creating an app in React and using Material UI for the look. I really want to create something like this

Where the «Some Title» is a dynamic field from my database as well as the contents. The thing I cannot figure out is what is the best (non skanky) way to add the title into the outline? Thoughts?

Answer position or transform can help you too :

* < margin: 0; padding:0; box-sizing:border-box; >.fieldset < border: solid; color: #353fff; border-radius: 1em; margin: 2em 1em 1em; padding:0 1em 1em; >.legend < transform: translatey(-50%); width: max-content; background: white; padding: 0 0.15em; >.fieldset li

Источник

How to create a colored border around text with HTML and CSS

Using borders, you can add a box around text, and set or change the border to nearly any color. A border in your HTML (hypertext markup language) page helps bring attention to a section of text or surround any other HTML elements. Borders are added to HTML using CSS (cascading style sheets).

Border CSS

Border CSS has properties for line type (solid, dotted, etc.), line width, and line color. The following table elaborates on the details of each and which values are acceptable to make them work properly.

CSS Border Property	Valid Values	Example
border (all sides) border-top (top line only) border-right (right line only) border-bottom (bottom line only) border-left (left line only)	Any valid combination of the properties below.	dotted thin black
border-style (all sides)	solid dotted dashed double groove ridge inset outset none hidden	solid
border-width (all sides)	width, specified in px, pt, cm, em width, specified as thin, medium, or thick	3 px
border-color (all sides)	color, specified as color code color, specified as named color	#FF00FF

Add a border using the style attribute

HTML tags can be formatted using a style attribute. To add a border using the style attribute, add the border CSS inside the quotes after style=.

In the example below, we surrounded a paragraph ( ) with a solid red border that is 3 pixels wide.

First example with text surrounded by a red border.
This example also has multiple lines.

To create the example above, the code below is used.

<p style="border-width:3px; border-style:solid; border-color:#FF0000; padding: 1em;">First example with text surrounded by a red border.
This example also has multiple lines.p>

In the code above, the CSS is defining the border size («px» short for pixel), style type, and border color. The style of the border is how the border appears on the screen. In our example, we used the «solid» border style. The border color defines the color you want to use for the border. In the example above, the color code #FF0000 is used, which is the color code for red.

A border can also be applied to only one side. For example, with the heading of this page, we have a grey underline. This line is actually a border, achieved with the CSS code border-bottom: 1px solid #93B0D2;.

Placing the CSS formatting inside the style attribute can be applied to other HTML tags, such as the div tag or span tag. In the example below, a border is added to a single word using the span tag.

Here is a second example with a bordered word , with different styles applied to the top, bottom, left, and right.

To create the example above, the following code is used.

<span style="border-top:thick green solid;border-bottom:thick green double;border-left:4px #2330C4 dotted; border-right:thin #2330C4 dotted;padding-left:2px;padding-right:2px;">wordspan>

Add a border using a CSS class

The appearance of elements on a web page may also be defined with inline CSS. Inline CSS is defined in your HTML document, in the element. Or, you can define the CSS in an external file with the .css extension. Then, you can link to this file from any HTML page, and elements in that document can use the CSS styles. For example, with the CSS code below, a new class named «borderexample» is created that can be applied to any HTML tag.

Using the code above, if you want to apply this border style to an HTML paragraph or word, you can type something similar to the example below.

<p class="borderexample">Here is an example of a border created using CSS.p> <p>The class can also be <span class="borderexample">usedspan> on the span tag.p>

On your web page, the code above would look like the example below.

Here is an example of a border created using CSS.

The class can also be used on the span tag.

Related information

Источник

Text border using css (border around text)

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

5 Answers 5

Use multiple text shadows:

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

Alternatively, you could use -webkit-text-stroke, which produces a slightly different result because it modifies the stroke width instead of adding additional shadows around the text. Despite the webkit prefix, it works in most browsers (including Firefox) as of 2022:

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

Sure. You could use CSS3 text-shadow :

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

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 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.

Источник