Making a shadow for the text using CSS. Outlining text using CSS. Outlining text with CSS means: two ways to implement the example. Thin, crisp outline

To control the border of an element, use the generic border property. This property allows you to set the thickness, style, and color of an element's border in a single declaration.

These three properties (border thickness, border style, and color) can be set in a single declaration. Here's an example:

You can specify a border style on only one side of an element. To do this, use the properties border-top (top border), border-right (right border), border-bottom ( bottom line), border-left (left border).

In this example, each side of the block has a different border thickness, style, and color.

Think about how you could create a shape like this using CSS:

Border values ​​- thickness, style and color - can be set separately using special properties.

• border-style - border style.
• border-width - border width.
• border-color - border color.

Let's consider each of the values ​​separately.

border-style property Border style.

The border-style property sets the style of the border. In CSS, in HTML differences, the border of an element can be not only solid. The following values ​​are accepted for the border style:

1. none - no border (default).
2. solid - solid border.
3. double - double border.
4. dashed - dotted border.
5. dotted - a border made of a series of dots.
6. ridge - "ridge" border.
7. groove - "groove" border.
8. inset - depressed border.
9. outset - extruded border.

Examples of what they look like.

no border (none)

solid border

double border

border of a series of dots (dotted)

dashed border

groove border

ridge border

indented border (inset)

extruded border (outset)

By the way, if you set the border color to black for the ridge frame, you will get this result.

A div block with a black border and ridge style.

The frame looks solid, but that's because the ridge style is created by adding a black shadow effect, and the black effect is not visible on a black frame.

With help border-style properties The border style can be set not only for all sides of the block. It is possible to set several values ​​for one border-style property; depending on the number of values, the border style will be assigned different number sides of the block. You can set one, two, three or four values. Let's look at examples for each case.

One value (solid) - the border style is set for all sides of the block.

Two values ​​(solid double) - the first value set the style for the top and bottom sides, the second for the side.

Three values ​​(solid double dotted) - the first value for the top side, the second for the sides, the third for the bottom.

Four values ​​(solid double dotted dashed) - each value for one side clockwise starting from the top.

The border-width property. Border thickness.

To set the width of an element's border, use the border-width property. The border thickness can be specified in any absolute units of measurement, for example in pixels.

Like the border-style property, the property can also be set to one to four values. Let's look at examples for each case.

Example code:

Also for the border-width property there are values ​​in the form keywords. There are three in total:

• thin - thin border;
• medium - average thickness;
• thick - thick border;

Border thickness: thin.

Border thickness: medium.

Border thickness: thick.

The border-color property. Border color.

To control the border color, use the border-color tool. The colors for this property can be set using any method described in the article "Colors in CSS", namely:

• Hexadecimal notation (#ff00aa) of the color.
• RGB format is rgb(255,12,110) . RGBA format for CSS3.
• HSL and HSLA formats for CSS3.
• Color name, for example black. Full list Color names are given in the CSS color names table.

The border-color property can also have one to four values ​​and treats them similarly to the previous properties.

One value (red).

Two values ​​(red black).

Three values ​​(red black yellow).

Four values ​​(red black yellow blue).

Now let's return to the problem stated above and draw a figure:

Here is the code that draws such a figure, only larger in size:

Setting values ​​for sides separately

It was mentioned above that you can specify border property values ​​for only one side of a block. There are properties for these purposes:

• border-top (top border)
• border-right
• border-bottom
• border-left (left border)

Let me remind you that for all properties three values ​​​​are specified (thickness, style and color) in any order. But there are properties that allow you to set the thickness, color and style for each side separately. The writing of these properties is derived from the above.

Top border options (border-top).

• border-top-color - sets the color of the element's top border.
• border-top-width - sets the thickness of the element's top border.
• border-top-style - sets the style of the element's top border.

Right border options (border-right).

• border-right-color - sets the color of the element's right border.
• border-right-width - sets the thickness of the element's right border.
• border-right-style - sets the style of the element's right border.

Bottom border options (border-bottom).

• border-bottom-color - sets the color of the element's bottom border.
• border-bottom-width - sets the thickness of the element's bottom border.
• border-bottom-style - sets the style of the element's bottom border.

Left border options (border-left).

• border-left-color - sets the color of the left border of the element.
• border-left-width - sets the thickness of the element's left border.
• border-left-style - sets the style of the left border of the element.

An example of using these properties:

The border-radius property. Rounding border corners.

The border-radius property is intended to round the corners of an element's borders. This property appeared in CSS3 and works correctly in all modern browsers, with the exception of Internet Explorer 8 (and older versions).

The values ​​can be any numbers used in CSS.

Border-radius property: 15px.

If the block frame is not specified, then the fillet occurs with the background. Here is an example of a rounded block without a border, but with a background color:

Border-radius property: 15px.

There are properties for rounding each individual corner of an element. This example uses them all:

Border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 0;

Border-radius property: 15px.

Although this code can be written in one declaration: border-radius : 15px 0 15px 0 . The fact is that the border-radius property can be set from one to four values. The table below outlines the rules that govern such announcements.

Having carefully studied this table, you can understand that the most short note the desired style will be like this: border-radius : 15px 0 . There are only two meanings.

A little practice

Drawing a lemon using CSS.

Here is the code for such a block:

Margin: 0 auto; /* Center the block */ width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px;

We have already drawn the figure:

Now let's leave a triangle from it:

The triangle code is:

Margin: 0 auto; /* Center the block */ padding: 0px; width: 0px; height: 0; border: 30px solid white; border-bottom-color: red;

CSS border element is one or more lines surrounding the element's content and its padding. The border is specified using the shorthand border property. The frame style is set using three properties: style, color And width.

Decorating frames and borders of HTML elements using CSS properties

1. Border-style

By default, borders are always drawn on top of the element's background, with the background extending to the outer edge of the element. The frame style determines its display; without this property, frames will not be visible at all. For an element, you can set a border for all sides simultaneously using the border-style property, or for each side separately using the border-top-style qualifying properties, etc. Not inherited.

border-style (border-top-style, border-right-style, border-bottom-style, border-left-style)
Values:
none	The default value means no frame. Also removes the frame of an element from a group of elements with the value of this property set.
hidden	Equivalent to none .
dotted	dotted
dashed	dashed
solid	solid
double	double
groove	groove
ridge	ridge
inset	inset
outset	outset
{1,4}	Listing four different styles for an element's border at once, just for the border-style property: (border-style: solid dotted none dotted;)
initial
inherit

Syntax

P (border-style: solid;) p (border-top-style: solid;)

2. Frame color border-color

The property sets the color of the frames on all sides at the same time. Using the clarifying properties, you can set a different color for the border of each side of the element. If no color is specified for the frame, it will be the same as the color of the element's text. If the element has no text, the border color will be the same as the parent element's text color. Not inherited.

border-color (border-top-color, border-right-color, border-bottom-color, border-left-color)
Values:
transparent	Installs transparent color for the frame. At the same time, the width of the frame remains. Can be used to change the border color when hovering the mouse over an element to avoid the element being displaced.
color	The color of the frames is set using the values ​​of the property. (border-color: #cacd58;)
{1,4}	Listing four different colors for an element's borders at once, just for the border-color property: (border-color: #cacd58 #5faf8a #b9cea5 #aab238;)
initial	Sets the property value to the default value.
inherit	Inherits the property value from the parent element.

Syntax

P (border-color: #cacd58;)

3. Border-width

The frame width is specified using length units or keywords. If the border-style property is set to none and the element's border is set to some width, then in this case The frame width is set to zero. Not inherited.

Syntax

P (border-width: 2px;)

4. Setting a frame with one property

The border property allows you to combine the following properties: border-width , border-style , border-color , for example:

Div ( width: 100px; height: 100px; border: 2px solid gray; )

In this case, the specified properties will be applied to all borders of the element simultaneously. If any value is not specified, the default value will take its place.

5. Setting a frame for one border of an element

In cases where you need to specify a different border style for an element, you can use the shorthand notation for the corresponding border.
The properties listed below combine the following properties into a single declaration: border-width , border-style , and border-color . The list of properties is specified in a given order, while one or two values ​​can be skipped, in which case their values ​​will take on the default values.

The style of the top border is set using the border-top property, the bottom - border-bottom , the left - border-left , and the right - border-right .

Syntax

P (border-top: 2px solid grey;)

6. External contour outline

The property specifies an outer border around elements (i.e. outside the normal border). The main purpose of this property is to highlight an element. Unlike the border property, applying this property does not affect the size or position of the element, because the outline is displayed on top of the element block, which in turn can lead to overlap margins element and neighboring areas.

Also, the outer contour, unlike the element’s frame, surrounds the element on all sides, framing it entirely.

The outer outline is always rectangular and does not follow the border of the block for which border-radius is specified.

The outline property allows you to combine the following properties: outline-color , outline-style , outline-width . If any value is not specified, the default value will take its place.

Div ( width: 100px; height: 100px; outline: #cacd58 solid 2px; )

6.1. outline-style

The appearance of the outer contour line is set similarly to the style of the element's frame. Not inherited.

Syntax

P (outline-style: ridge;)

6.2. Outer outline color outline-color

The color of the outer contour can only be specified when set value outline-style. Not inherited.

Syntax

P ( outline-style: ridge; outline-color: silver; )

6.3. Outer outline thickness outline-width

The thickness of the outer contour line is set similarly to the thickness of the element's frame. Not inherited.

Syntax

P ( outline-style: dotted; outline-width: 5px; )

Property CSS border It works to create the border of an object, namely the thickness of the frame, its color and style. This property is widely used in HTML. You can create various effects to better perceive the content on the page. For example, design a sidebar, website header, menu, etc.

1. CSS border syntax

border : border-width border-style border-color| inherit;

• border-width - border thickness. You can set it in pixels (px) or use the standard values ​​thin, medium, thick (they differ only in width in pixels)
• border-style - style of the displayed border. Can take the following values
  • none or hidden - cancels the border
  • dotted - dotted frame
  • dashed - frame made of dashes
  • solid - simple line (most often used)
  • double - double frame
  • groove - grooved 3D border
  • ridge, inset, outset - various 3D frame effects
  • inherit - the value of the parent element is applied
• border-color - border color. Can be set using specific name colors or in RGB format (see names of html colors for the site)

Note

The values ​​in the CSS border property can be set in any order. The most commonly used sequence is “thickness style color”.

2. Examples with different CSS borders

2.1. Example. Different border design styles border-style

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style:outset

Four different frames

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style:outset

Four different frames

2.2. Example. Change frame color on mouse hover

This example is very simple but interesting. It shows how you can use the :hover pseudo-class and CSS frame border to create simple effects(for example, for a menu).

When you hover your mouse over a block, the frame color will change

This is what it looks like on the page:

2.3. Example. How to make a transparent border frame

The frame can be made transparent. This effect is rare, but can sometimes be very useful for web designers. To set transparency, you need to use the color set in the form RGBA (R, G, B, P), where the last parameter sets the transparency ( real number from 0.0 to 1.0)

This is what it looks like on the page:

3. Border thickness: border-width property

Sets the line thickness. Previously we asked it in unified description border.

CSS border-width syntax

border-width: thin | medium | thick | meaning;

• thin - thin line thickness
• medium - average line thickness
• thick - thick line thickness

Below are some examples. The most unusual thing will be the different thickness of the border on each side.

border-width: thin

border-width: medium

border-width: thick

Different thickness at the borders

This is what it looks like on the page:

border-width: thin

border-width: medium

border-width: thick

Different thickness at the borders

4. How to make a border frame on only one edge (border)

The CSS border property has derived properties for setting one-sided borders on an element:

• border-top - to set the border at the top (top border)
• border-bottom - to set a border at the bottom (bottom border)
• border-right - to set the border on the right (right border)
• border-left - to set the border on the left (left border)

These boundaries can be combined, i.e. Write your own frame for each direction. The syntax is exactly the same as border.

There are also properties

• border-top-color - set the color of the top border
• border-top-style - setting the style of the top border
• border-top-width - setting the thickness of the top border
• etc. for each direction

In my opinion, it’s easier to write everything in a line than to create extra text in styles. For example, the following properties will be the same

/* Description of two identical styles: */

4.1. Example. Beautiful frame for highlighting quotes

Quote frame example

This is what it looks like on the page:

Quote frame example

Note
You can set a separate border for each side.

5. How to add multiple borders to an html element

Sometimes you need to make several borders. Let's give an example

5.1. First option with multiple borders

This is what it looks like on the page:

There is a second way through shadowing.

5.2. Overlay shadows to create multiple borders

This is what it looks like on the page:

6. Rounding corners at borders (border-radius)

For creating beautiful frames use the CSS border-radius property (only available in CSS3). It can be used to create rounded corners, which creates a completely different look. For example

7. CSS Indented Line

Pressed lines can look impressive on dark background, which is not suitable for every site.

---

This is what it looks like on the page:

To access border from JavaScript, you need to write the following construction:

document.getElementById("elementID").style.border="VALUE"

3.5 out of 5

Do you think it is possible with a couple of tags and pure CSS make a scalable triangle? What about the pentagon? But such a star? I think many people think not. Actually it is possible.

So, today we have a post-experiment. We will play with everyone known CSS property- border (and all that relate to it). During the experiment we will look at how to make some simple polygons, a star and look at one case where these techniques can be used in practice. Go!

Simple geometric shapes

So let's start with simple examples. Do you know how to draw a triangle? using HTML and CSS? And like this:

HTML

CSS

.trapezoid ( vertical-align: text-bottom; )

Trapezoid,
.polygon ( display: -moz-inline-block; )

Polygon,
.trapezoid ( margin:0; padding: 0; background: none; )

Polygon ( width: 10em; height: 10em; border: none; display: inline-block; text-align: center; )
.trapezoid (
display: inline-block; width: 1px; height: 0; margin: 0 auto;
border-left: 5em solid transparent; border-right: 5em solid transparent;
}

Polygon .aa ( border-bottom: 10em solid; border-top: none; )

Polygon.r2 ( height: 0em; )

Polygon.r3 ( height: 8.66em; )
.polygon.r3 .trapezoid ( border-width: 8.66em 5em; )

div.eg ( width: 10em; background: #FFF; margin: 0 0; padding: 1em; )
div.eg .polygon ( display: block; margin: 0 auto; )

R3 ( color: red; font-size: 0.5em; )

Star

HTML

Star

CSS

#star(
width: 15em;
height: 14.27em;
position: relative;
}

#star span,
#star(
display: block;
}

#top(
width: 0;
height: 0;
margin: auto;
border-right: 4.64em solid transparent;
border-left: 4.64em solid transparent;
border-bottom: 14.27em solid;
}

#center(
width: 5.7em;
border-right: 4.65em solid transparent;
border-left: 4.65em solid transparent;
border-top: 3.36em solid;
height: 0;
position: absolute;
top: 5.46em;
left: 0;
z-index: 100;
text-align: center;
}

#bottom(
position: absolute;
bottom: 0;
left: 2.852em;
border-right: 4.635em solid transparent;
border-left: 4.635em solid transparent;
border-bottom: 3.4em solid #fff;
width: 0;
height: 0;
}

#center span(
margin-top: -2em;
color: #000;
font-weight: bold;
}

a#star:hover #center span(
color: #fff;
background-color: transparent;
}

a#star(
color: #f90;
background-color: transparent;
}
a#star:hover(
color: #fc3;
background-color: transparent;
}

Some more examples

• Christmas tree and unusual layout by Eric Meyer;
• Tiles and menus from the chief technologist of Technocracy;

Greetings, dear readers. Today I will tell you and show you how you can do it in css stroke text. We will carry out all manipulations exclusively with the text-shadow property.

Thin, crisp outline

As a text on which we will test all our ideas, I propose to use this:

Here you can see that the block with text has the class text-dec. It is by this that we will access our element in css, applying to it required properties. So, how to make a thin stroke:

Text-dec( font-size: 50px; color: yellow; text-shadow: 1px 1px 0 black, -1px -1px 0 black )

Let's ask right away big size font so that everything is very clearly visible, and the text color is yellow, for example. The third line in our case implements that very stroke.

The text-shadow property allows you to add a shadow to the text; you can add as many shadows as you like, separated by commas. The property syntax is:

Text-shadow: horizontal offset | vertical | blur | color

In our case, we first set a small offset down and to the left, and then up and to the right. As a result, the text has been outlined along its entire contour. If you add a 10 pixel blur to each shadow, it will look like this:

Blurred stroke

Another approach is to not specify an offset at all, but define a blur - then the text will also be outlined, but not clearly. Let's add the same exact text to html, but just set a different style class - text-dec2:

Text-dec2( font-size: 50px; color: blue; text-shadow: 0 0 7px red; )

It looks like this:

Bold stroke

This is more difficult to implement, since moving the shadows too much can make the text unreadable. And yet a certain effect can be achieved, although for this you will have to add much more shadows than in previous cases. Accordingly, add to html new text fragments with classes text-dec3 and text-dec4 . And here are the styles for them:

Text-dec3( font-size: 50px; color: yellow; text-shadow: 1px 1px 0 black, -1px -1px 0 black, 2px 2px 0 black, -2px -2px 0 black, 3px 3px 0 black, -3px - 3px 0 black, 4px 4px 0 black, -4px -4px 0 black ) .text-dec4( font-size: 50px; color: yellow; text-shadow: -1px 1px 0 black, 1px -1px 0 black, -2px 2px 0 black, 2px -2px 0 black, -3px 3px 0 black, 3px -3px 0 black, -4px 4px 0 black, 4px -4px 0 black )

As you can see, the text retained readability and at the same time received a decent black outline. The essence of this approach is that we gradually add new shadows, increasing the offset by 1 pixel each time.

Even thicker stroke on all sides

Further - more difficult. I personally didn’t know how to properly implement a stroke on all sides, but then I came across a text-shadow generator on the Internet, which allows you to customize the shadow in visual mode, and then you just need to copy its code. Here is a link to the generator.
With its help I was able to make a shadow like this:

I won’t give the code, it takes up as many as 50 lines. However, look for yourself in the generator.

CSS is not omnipotent yet

On this css features are ending. If you want a nice bold stroke like this one:
Then make it in Photoshop, and the text itself will have to be inserted onto the web page as an image

So far I know such options as how to make a text outline in CSS. Maybe you know some, write in the comments. Next time I'll show you a few more effects you can do with text using the text-shadow property.