Types of css frames. Frame Options

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

in this example

A double border is added 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

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 the 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 either using the usual pixels, percentages and other CSS length units, or using 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.

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, unlike HTML, 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.

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:

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- 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 right border of the element.
• 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 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;

Hello, dear readers of the blog site! Today we will continue learning about Cascading Style Sheets or CSS. In previous articles, we have already examined in general terms the block layout of the site. As a result, we began to have quite professional web pages, but they were missing something. But they most likely lack indents and frames. Today we will look at the style rules of margin, padding and border, which allow you to set indents and frames for html elements.

CSS Padding Options

With the help of cascading style sheets, it is possible to set two types of indents.

1.Indentation is the distance from the imaginary border of the element to its content. The distance value is specified using the parameter padding. This indentation belongs to the element itself and is located inside it.

2. Margin— the distance between the border of the current element of the web page and the borders of neighboring elements or the parent element. The size of the distance is controlled by the property margin. This indentation is located outside the element.

For clarity, picture:

For example, consider a cell filled with text. Then the padding is the distance between the imaginary border of the cell and the text it contains. And the outer margin is the distance between the borders of adjacent cells. Let's start with padding.

Padding in CSS using padding (top, bottom, left, right)

The padding-left, padding-top, padding-right and padding-bottom style properties allow you to set the padding values, respectively, on the left, top, right and bottom of a web page element:

padding-top | padding-right | padding-bottom | padding-left: value | interest | inherit

The amount of indentation can be specified in pixels (px), percentage (%) or other units acceptable for CSS. When specifying percentages, the value is calculated from the width of the element. The inherit value indicates that it is inherited from the parent.

For example, for the current paragraph, I applied a style rule that sets the left padding to 20 pixels, the top padding to 5 pixels, the right padding to 35 pixels, and the bottom padding to 10 pixels. The rule entry will look like this:

p.test(
padding-left:20px;
padding-top:5px;
padding-right:35px;
padding-bottom:10px
}

Composite padding rule allows you to specify indents on all sides of a web page element at once:

padding:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

A prefab rule allows one, two, three, or four values, separated by a space. In this case, the effect depends on the number of values:

• if you specify one value, it will set the amount of indentation on all sides of the page element;
• if you specify two values, the first will set the amount of indentation at the top and bottom, and the second - at the left and right;
• if you specify three values, then the first will determine the amount of indentation at the top, the second - on the left and right, and the third - on the bottom;
• if four values ​​are specified, the first will set the amount of indentation at the top, the second at the right, the third at the bottom, and the fourth at the left.

Thus CSS rule The above can be reduced as much as possible and written as follows:

p.test( padding:5px 35px 10px 20px)

The margin property or margins in CSS

The margin-left, margin-top, margin-right and margin-bottom style attributes allow you to set the margin values, respectively, left, top, right and bottom:

margin-top | margin-right | margin-bottom | margin-left:<значение>|auto|inherit

As mentioned above, the margin is the distance from the border of the current element to the border of the adjacent element, or, if there are no neighboring elements, to the internal border of the parent container.

The amount of indentation can be specified in pixels (px), percentage (%) or other units allowed for CSS:

p(
margin-left: 20px;
}
h1(
margin-right:15%;
}

The value auto means that the indent size will be automatically calculated by the browser. If you use percentage notation, the indentations are calculated depending on width of the parent container. Moreover, this applies not only to margin-left and margin-right, but also for margin-top and margin-bottom, percentage margins will be calculated depending on the width, not the height, of the container.

It is permissible to use as values ​​of external indents negative values:

p(
margin-left:-20px;
}

If with positive indent values neighboring elements are moved away, then with a negative value the neighboring block will collide with the element for which we have set such a negative offset.

We can also specify padding using the style attribute margin. It sets the indentation values ​​simultaneously on all sides of a web page element:

margin:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

This property in the case of specifying one, two, three or four indentation values, it obeys the same laws as the padding rule.

Border Options Using the Border Property

When setting frames, there are three types of parameters:

• border-width — border thickness;
• border-color — border color;
• border-style — the type of line with which the frame will be drawn.

Let's start with the frame thickness parameter:

border-width: [value | thin | medium | thick] (1,4) | inherit

Frame thickness can be specified in pixels or other units available in CSS. The thin, medium and thick variables set the border thickness to 2, 4 and 6 pixels, respectively:

border-width:medium;

As with the padding and margin properties, the border-width parameter allows one, two, three, or four values, thus setting the width of the border for all sides at once or for each side separately:

border-width: 5px 3px 5px 3px

For the current paragraph, make the thickness of the top border 1px, right 2px, bottom 3px, and left 4px using the rule (border-width: 1px 2px 3px 4px;)

Using the style attributes border-left-width, border-top-width, border-right-width and border-bottom-width, you can set the thickness of the left, top, right and bottom sides of the border, respectively:

border-left-width|border-top-width|border-right-width|border-bottom-width: thin|medium|thick|<толщина>|inherit

The next parameter is border-color with which you can control frame color:

border-color: [color | transparent] (1,4) | inherit

The property allows you to set the border color for all sides of the element at once or only for the specified ones. As a value, you can use the methods for specifying colors accepted in HTML: hexadecimal code, keywords, etc.:

p (border-width: 2px; border-color: red)

transparent sets the transparent border color, and inherit inherits the value of the parent. By default, if the border color is not specified, the one used for the font inside the element will be used.

Using the style attributes border-left-color, border-top-color, border-right-color and border-bottom-color, you can set the color of the left, top, right and bottom sides of the border, respectively:

border-left-color|border-top-color|border-right-color|border-bottom-color: transparent|<цвет>|inherit

And last border-style parameter sets frame type:

border-style: (1,4) | inherit

The frame type can be specified for all sides of an element at once or only for those specified. You can use multiple keywords as values. The appearance will depend on the browser used and the thickness of the frame. Meaning none is used by default and does not display a frame and its thickness is set to zero. The hidden value has the same effect. The resulting frame for other values, depending on the thickness, is shown in the table below:

The style attributes border-left-style, border-top-style, border-right-style and border-bottom-style specify the style of the lines that will be drawn on the left, top, right and bottom sides of the frame, respectively:

border-left-style|border-top-style|border-right-style|border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

As with the padding and padding options, there are generic border property. It allows you to simultaneously set the thickness, style and color of the border around an element:

border: | inherit

The values ​​can be in any order, separated by spaces:

td (border: 1px solid yellow)

To set a border only on certain sides of an element, there are the border-top, border-bottom, border-left, border-right properties, which allow you to set parameters for the top, bottom, left and right sides of the frames, respectively.

All that remains is to summarize:

• for the task padding we use the property padding;
• for settings margins there is a rule margin;
• frame parameters are specified using the attribute border.

I note that all these css properties increase the size of a web page element. Therefore, if we change the thickness of the border or the size of the padding of the block containers that form the design of the web page, we will have to change the sizes of these containers accordingly, otherwise they may move and the design will be broken.

That's all, see you next time!

We have studied the properties for text and font design, now it’s our turn to move on to other elements. In this tutorial we will look at creating frames using CSS. This property is used quite often, so it is worth paying a little more attention to.

And so, let's assume that you need to make a frame around some element. For example, let's create a title and we'll make a frame around it.

Parameters characterizing the frame: 1) Frame thickness, 2) Frame style and 3) Frame color. And let's go in order:

• 1. Frame thickness: border-width: 2px;
• 2. Frame style: border-style: solid;
• 3. Frame color: border-color: #ff0000;

What are the frame styles in CSS? Below are all available frame styles:

• dotted - This is a dot frame.
• dashed - This is a dotted frame
• solid - It's a solid frame
• double - This is a double frame
• groove - Volumetric view
• ridge - Volumetric view
• inset - Volumetric view
• outset - Volumetric view

Now we have everything to create a frame around the title.

HTML

Create a frame around the title.

And the style for the frame itself.

H2( border-width: 2px; border-style: solid; border-color: #FF0000; )

As a result, a solid red frame with a thickness of 2px.

The frame is formed from four sides: Upper, Right, Lower And Left and, since we have the property specified border , then the browser by default draws all four sides of the frame. Thus, if you need to specify a frame on only one side, then prefixes are used to indicate the side where to create the frame.

• top - Top.
• right - Right
• bottom - Bottom
• left - Left

Thus, if we want to make a frame only at the bottom of the paragraph, that is, underline it, then for each property border add a prefix bottom . The result will be the following code structure.

H2( border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: #FF0000; )

Using these styles for the browser will mean that you only need to create a frame from the bottom, i.e. underlining the title. You can duplicate it in the same way this code, setting the frame on the other side, for example the top.

H2( border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: #FF0000; border-top-width: 2px; border-top-style: double; border-top-color: # FF0000;

The title will now have a red border at the top and bottom. The same can be done for other parties.

As you have probably already noticed, the recording turned out to be quite large, so there is an abbreviated type of recording that is often used in practice.

The picture above shows the structure of the abbreviated notation, where the property is indicated border and as values, separated by a space, the width of the frame is indicated - border-width , frame style - border-style and frame color - #ff0000 .

That is, the browser, seeing such an abbreviated entry border: 2px solid #ff0000; , will also create a frame on all four sides of the title. This short entry is equivalent to the entry we used above (where three properties were used).

If using a short notation you need to indicate the frame on only one side, then we add to the property the simpleton indicating the side from which to create the frame.

H2( border-top:2px solid #ff0000; )

So, using a short note, a frame is made from the top, where the thickness, style, and color of the frame are also indicated.

This way, using the property border a frame is made around any element. You can also use the frame to create underlines for links when you need a different color for the underline. Well, that’s all with the framework, let’s move on to the next important lesson, where we’ll look at