Html border over text

How can I have some text overlaying a border with CSS?

As it’s for a form , you should use a fieldset element.

Legend’s are notoriously difficult to get consistent results across browsers. It’s semantically correct, but practically a pain. See stackoverflow.com/questions/4006824/…

For use with anything even when not using the forms fieldset, you can use my method in this JSFiddle (It does NOT use Javascript, JSFiddle can be used for pure HTML & CSS), I will explain what it does in here:

What the fiddle demonstrates is having 3 divs as the top single border area, made up of 2 divs either side with a 1px border in the middle, and one on each side, and the middle div having text only, aligned to the center and padded as needed.

There is then a div placed underneath that which is the main content, but it only has 3 borders (left, right and bottom. The top has been made by the side div’s).

The CSS and HTML is here, and JSFiddle link underneath.

This method should fit all your criteria

• Border text is in the place of part of the top border
• Border text is central, can be placed anywhere along by modifying the CSS
• Easy to change dimensions of the bordered area

.wrapper-box < float:left; width:500px; height:150px; >.side-border < float:left; height:24px; width:199px; border-top: solid black 1px; margin-top:25px; >.side-border.l < float:left; border-left: solid black 1px; >.side-border.r < float:left; border-right: solid black 1px; >.border-text < float:left; height:35px; margin-top:15px; width:100px; text-align:center; >.box-content

To modify the CSS for longer text, just reduce the width of the border-text, and increase the width of the side-border.

Hope this helps you out, I’ll be keeping this for future reference myself :).

Источник

How To Add HTML Border Around Text

In HTML, you can add a box around text, or a border around text and change it to any color or thickness.

This can be achieved using some CSS.

CSS is applied to HTML elements to alter the look of the elements.

In the below examples, we will see two ways we can add HTML border around text and can colorize it.

Add HTML Border Around Text Using Inline CSS

You can add inline css to your HTML elements and add a border around your text elements.

Using the style attribute on HTML elements, you can give the border property and add a border.

This is an example of a HTML border around some text.

Let’s look at some HTML code

This is an example of a HTML border around some text.

In the above example, we can see that we used the style attribte and used the border styles to add a border around the text.

Add HTML Border Around Text Using External CSS

The concept remains the same weather you are applying inline CSS or external CSS.

We make use of the CSS border property to assign a border to any element.

This is an example of a HTML border around some text using external css.

Let’s look at some the HTML code for the above

This is an example of a HTML border around some text using external css.

Recent Posts

HTML Option Selected Attribute

In this blog post, we will learn about the Selected attribute in HTML Option element. A dropdown list is created using the Select tag in HTML.

Create A REST Web API In ASP.NET Core 3.1 — ASP.NET Core CRUD Web API

In this blog post, we will create an ASP.NET Core Web API from scratch step by step. We will follow RESTful principles and create CRUD operations and create an ASP.NET Core Web API in .NET Core version 3.1.

During the implementation, we install and use Entity Framework Core to connect to our SQL Server database and perform CRUD operations.

Char Array To String In C#

In this blog post, we will learn how to convert a Char Array To String in C#. A char array is an array of character types. That means they hold a single character value in each of its elements.

C# Dictionary Foreach — Iterate Over Dictionary C#

In this blog post, we will learn how to iterate over a dictionary in C#. We will use a few different ways to iterate over the dictionary.

Convert List To IEnumerable In C# — AsEnumerable Method In C#

In this blog post, we will see how we can convert a List to IEnumerable in C#. A List in C# already implements an IEnumerable but you may still feel the need to convert a List to IEnumerable in C#.

Источник

How do I Add border to text in inputfield

I’m trying to find out how I can customize the text in a input field with css. What I want to do is to add a border to the text written in the input field. I can customize the font-family, font-size with the «input» in css but when I add a border it applies on the input field. JSfiddle trying to explain what I mean

I’ve tried searching but didn’t find anything useful, I’m sure this is easy and hopefully someone can help me. Thank you Edit: I’m trying to get the text in the input field like this: https://i.stack.imgur.com/oKaUI.png

2 Answers 2

notice I have put an ID attribute on your input:

  . and not the inputwindow itself. 

and your CSS is below. Notice the #myInput::-webkit-input-placeholder. #myInput targets your input box, and the webkit bit is for google..moz is for firefox, and ms-input-placeholder is for Internet Explorer:

body < background-color: #ccc; >input < border: 1px solid #000 width: 200px; padding: 20px; font-size: 20px; >#myInput::-webkit-input-placeholder < border-style:solid; border-width:medium; >#myInput:-moz-placeholder < border-style:solid; border-width:medium; >#myInput:-ms-input-placeholder

To change the font of the placeholder text to stroke, try this:

#myInput::-webkit-input-placeholder < color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; >#myInput:-moz-placeholder < color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; >#myInput:-ms-input-placeholder

Источник

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.

Источник