Frames and boundaries. CSS: border. Element borders Double border css

Description

The generic border property allows you to simultaneously set the thickness, style, and color of the border around an element. The values ​​can be in any order, separated by a space; the browser itself will determine which of them corresponds to the desired property. To set a border only on certain sides of an element, use the border-top , border-bottom , border-left , border-right properties.

Syntax

Values

The border-width value determines the thickness of the border.

Several border-style values ​​are provided to control its appearance.

Their names and the result of the action are presented in Fig. 1.

Fig.1. Frame styles

border-color sets the color of the border, the value can be in any format allowed by CSS.

border

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

This example adds a double border around the layer. The result is shown in Fig. 2.

Rice. 2. Applying the border property

Object Model

document.getElementById("elementID ").style.border Browsers Browser

Internet Explorer

up to the sixth version inclusive, with a border thickness of 1px, it displays dotted as dashed . With a thickness of 2px and higher, the dotted value works correctly. This bug is fixed in IE7, but only for all 1px borders. If one of the block borders has a thickness of 2px or higher, then in IE7 the dotted value turns into dashed . Internet Explorer versions up to and including 7.0 do not support the inherit value. Border style in

different browsers may vary slightly when using groove , ridge , inset or outset values. CSS border, An 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

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.

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.

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 border 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;)

Description

Sets the border style around an element. It is permissible to set individual styles for different sides of an element.

Syntax

border-style: (1,4) | inherit

Values

Several values ​​for the border-style property are provided to control the appearance of the border.

The appearance depends on the browser used and the border thickness set. In table 1 shows the names of the styles and the resulting frame for different thickness values ​​- 1, 3, 5 and 7 pixels.

In addition to the values ​​listed in the table, the following keywords are used.

None Does not display the border and its thickness (border-width) is set to zero.

border-color sets the color of the border, the value can be in any format allowed by CSS.

hidden Has the same effect as none except applying border-style to table cells that have the border-collapse property set to collapse . In this case, the border around the cell will not appear at all.

inherit Inherits the value of the parent. You can use one, two, three or four values, separated by a space. The effect depends on the quantity and is indicated in the table. 2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Result

This example adds a double border around the layer. The result is shown in Fig. 2.

this example

Object Model

shown in Fig. 1.

Internet Explorer versions up to and including 7.0 do not support the hidden and inherit values.

The border style may vary slightly between browsers when using groove , ridge , inset , or outset values.

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 border), border-left (left border).

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

Think about how to CSS help you can create a shape like this:

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

Using the border-style property, the border style can be set not only for all sides of the block. It is possible to set multiple values ​​for one border-style property; depending on the number of values, the border style will be assigned to a different number of 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:

There are also keyword values ​​for the border-width property. 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 was introduced in CSS3 and works correctly in all modern browsers except 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 shortest entry for 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;

Borders are those lines that surround an element (the content it contains and the padding around it). An example we have already encountered is cell frames inside a table.

CSS provides two types of borders: inner borders and outer lines. The CSS properties responsible for the design of frames begin with the word “border”, which can be translated as “Frame”, “Border”. The presence and format of the outer outline are specified by properties starting with the word “outline”. Outline, unlike border, does not affect the width and position of the framed block. In addition, it cannot be installed on one side only, as border- only from all sides at once.

First, let's talk about border design, then we'll move on to outline.

border-width

Sets the border width. It is clear that by default the element is surrounded by frames on four sides. The property allows you to set the width of the borders either the same for all sides or different for each side. Depending on what width needs to be assigned to which borders, you can specify from one to four values ​​in the rule.

You can set the width using the usual pixels, percentages and other CSS length units, or reserved words thin(2px), medium(4px) and thick(6px).

Border-width: 16px 12px 4px 8px;

border-style

Defines the border style. Note that if you do not set this rule but specify the property border-width, then there will be no frames at all, so if you want visible borders, be sure to specify border-style.

A property can have quite a lot of values, all of them are clearly demonstrated in the figure below.

The last paragraph shows that the style, like the thickness, of the frame on each side can be its own:

border-style: solid double dotted none

border-color

Works the same as the previous properties, but is responsible for the color of the borders. You can also set it from one to four values, and you already know the result. If the rule is not set, the frames will have the text color of the current element or, if this is not specified, the text color of the parent element.

Border-color: #C85EFA;

inherit inherits the value of the parent.

Makes it easier to write and saves code by allowing you to set all of the listed properties for borders on all sides of an element in one line:

P ( border: 2px solid green; )

To set different rules for frames on different sides, you can use the following values:

• border-top- upper limit.
• border-right- right.
• border-bottom- lower.
• border-left- left.

P ( border-left: 6px dotted yellow; )

outline-width

Same as border-width, only for the outer frame, not the inner frame. Sets the thickness of the outline in the same values ​​as border-width. In addition to the thickness of the element's frame, you need to specify its style, otherwise there will be no outline.

outline-style

Property values ​​duplicate values border-style. The rule specifies the style of the outer contour.