Рамка вокруг текста

How to Set Font Border in CSS?

CSS borders are very common in use and you might definitely have heard about them even if you are new to CSS. But as you might already know, we can set these borders only around the element, not around the font.

So, how can you set the border only around the fonts?

Both methods are quite easy to use. Let’s discuss each one in detail.

Set Font Border using the text-shadow Property

The text-shadow property is actually used to set a text shadow around the text. But, if we do some manipulations, we can make it look more like the font borders.

The basic idea is to add a shadow effect on the fonts in each direction.

For example, if we want to add a 1px border around the fonts, we have to set a 1px shadow to the left, 1px shadow to the right, 1px shadow to the top, and the same 1px shadow to the bottom of the fonts.

If you do this, the text shadow will look more like a border and not the shadow.

In case you don’t know, the text-shadow property takes in four values the h-offset, v-offset, blur-radius, and the color of the shadow. We will keep the blur radius 0px so that it could look more like a font border.

Here is a working example that sets a black color 1px border around the fonts:

Example:

Set Font Border using the -webkit-text-stroke Property

In the previous method, we added a shadow to the text and made it look exactly like a real font border. But that’s not the only way of doing it.

We can also do the same thing with the text-stroke property which is specially introduced to set the font borders. However, the text-stroke property isn’t a part of the CSS spec.

Therefore, we have to add the webkit prefix ahead of the text-stroke property to make it work in browsers like Chrome and Sarari. Now firefox does also support the text-stroke property with webkit .

In case you don’t know, webkit is a web browser rendering engine used by popular web browsers like Chrome and Safari.

The text-stroke property is a shorthand of the text-stroke-width and the text-stroke-color properties. So, if we want to add a 1px black color font border, we can use -webkit-text-stroke: 1px black; .

Here is a working example which sets a 1px wide black color font border:

Example:

Related posts:

Источник

Как добавить вокруг текста рамку определенного цвета?

Для создания рамки вокруг текста используйте стилевое свойство border , добавляя его к соответствующему селектору. Например, если для текста применяется тег

, то для него надо установить следующий стиль.

Применение свойства border к текстовому абзацу продемонстрировано в примере 1.

Пример 1. Рамка вокруг абзаца

HTML5 CSS 2.1 IE Cr Op Sa Fx

     p 
Нет страшнее зверя в сибирских лесах, чем разъяренный заяц-мутант. Вы видели, какие у него зубы? О, даже медведь боится этих зубов! А, как известно, медведи больше ничего не боятся.
  

Результат данного примера показан на рис. 1.

Рис. 1. Вид рамки вокруг абзаца

Следует учитывать, что в тексте может быть несколько абзацев и вокруг каждого тогда возникнет рамка. В подобных случаях лучше воспользоваться тегом , для которого и требуется установить стиль. А текст добавить уже внутрь этого контейнера (пример 2).

Пример 2. Рамка вокруг слоя

HTML5 CSS 2.1 IE Cr Op Sa Fx

     .outline 
Перед тем как убить героя, антагонист обязательно рассказывает ему про все свои злодеяния, чтобы создать необходимую паузу. Разумеется, любой протагонист весьма умело использует данное время против самого злодея.
 
Из этого правила есть только одно исключение. Герой может не суетиться, тянуть время, и вообще ничего не делать, потому что на помощь придут его друзья.
 
  

Источник

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.

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

Источник

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 to Set Font Border in CSS

With CSS, you can style fonts in several ways. For instance, we can set the border for a font to make it more attractive with respect to its looks. A font border is also added when it is required to outline some text. It also permits you to style the text and add color and width according to your preferences.

In this guide, we will learn about setting a font border in CSS.

How to Set Font Border in CSS?

In CSS, we can use the following properties to set font border:

Method 1: Use -webkit-text-stroke CSS Property to Set Font Border

The text-stroke property is specially introduced to set the border at fonts. However, the property text-stroke is not included in the W3c standards. This is why the keyword “-webkit” is added to it to perform the specified functionality. The -webkit-text-property works on Safari, Google Chrome, and Firefox browser.

Check out the following example to know more about setting the font border using the -webkit-text-stroke property.

Here is the text for which we want to set the border:

Within our HTML file, we have added a text as a heading using the “ “ tag and placed it into the body:

To set the border around the font, we will use the CSS “-webkit-text-stroke“ property with “1px” border and give it the “red” color. We will also specify the text color as blue, using the “color” property:

Now, we will save the code and open the HTML file in browser:

It can be seen that the font border has been applied successfully using the -webkit-text-stroke property and the added text looks stylish.

Method 2: Use text-shadow Property to Set Font Border

“text-shadow” property is itself a self-explanatory term as it is used for adding shadows in texts. However, it can be manipulated to set the font border efficiently.

So, let’s apply this CSS property on the same text to set the border around it.

Here, we will make the red shadow pop out “1px” from each side using the text-shadow property, “-1px 0px 0px” will specify the left side shadow, “1px 0px 0px” will specify the right-side shadow, “0px -1px 0px” will specify the shadow of top side and “0px 11px 0px” will specify the shadow of bottom side:

h2 {
text-shadow:
-1px 0px 0px red ,
1px 0px 0px red ,
0px -1px 0px red ,
0px 1px 0px red ;color: blue;
}

We have compiled different approaches for setting font borders in CSS.

Conclusion

To set the font border in CSS, the “-webkit-text-stroke” property and the “text-shadow” property can be used to add the font border in certain ways. The property text-stroke is not included in the W3c standards; however, it can be utilized with the -webkit keyword. This write-up has explained two methods that can assist you in setting font borders in CSS.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник