Description

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

Syntax

The values

The border-width value determines the thickness of the border. Several border-style values \u200b\u200bare provided to control its appearance. Their names and the result of the action are shown in Fig. 1.

Fig. 1. Frame styles

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

inherit inherits the value of the parent.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Figure: 2. Applying the border property

Object Model

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

Browsers

Internet Explorer up to and including version 6 displays dotted as dashed with a 1px border thickness. With a thickness of 2px or more, the dotted value works correctly. This bug is fixed in IE7, but only for all 1px borders. If one of the box borders is 2px or more thick, then in IE7 the dotted value becomes dashed.

Internet Explorer 7.0 or later does not support the inherit value.

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

CSS also allows us to create solid, dashed or dotted frame along the imaginary border of a Web page element.

The style attributes border-left-width, border-top-width, border-right-width, and border-bottom-width set the width 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

We can specify either an absolute or a relative numeric value for the border thickness, or one of the predefined values: thin, medium, or thick. In the latter case, the real thickness framework depends on the web browser. The default thickness is also browser dependent, so it is always best to set it explicitly.

In Listing 11.2, we set the border width of the table cells to one pixel.

And here is the style that makes all headings of the first level frame from the bottom side alone, 5 pixels thick:

H1 (border-bottom-width: 5px)

Virtually all first level headings will be underlined.

The border-width style attribute allows you to specify thickness values \u200b\u200bfor all sides of the border at once:

border-width:<толщина 1> [<толщина 2> [<толщина 3> [<толщина 4>]]]

If one value is specified, it will set the thickness of all sides of the frame.

If two values \u200b\u200bare specified, the first will set the thickness of the top and bottom, and the second will set the left and right sides of the frame.

If three values \u200b\u200bare specified, the first will set the thickness of the top, the second will set the left and right, and the third will set the bottom sides of the frame.

If four values \u200b\u200bare specified, the first will set the thickness of the top, the second to the right, the third to the bottom, and the fourth to the left framework.

Example:

TD, TH (border-width: thin)

The style attributes border-left-color, border-top-color, border-right-color, and border-bottom-color 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

The transparent value sets the "transparent" color through which the background of the parent element will "see through".

ATTENTION!

The color of the border should always be set explicitly, otherwise it may not be drawn.

Example:

H1 (border-bottom-width: 5px
border-bottom-color: red)

The border-color style attribute allows you to specify a color for all sides of the border at once:

border-color:<цвет 1> [<цвет 2> [<цвет 3> [<цвет 4>]]]

It behaves the same as the similar border-width style attribute:

TD, TH (border-width: thin;
border-color: black)

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, respectively, the left, top, right and bottom sides. framework:

border-left-style | border-top-style | border-right-style |

border-bottom-style: none | hidden | dotted | dashed | solid | double | groove |

ridge | inset | outset | inherit

The following values \u200b\u200bare available here:

None and hidden - no border (normal behavior);

Dotted - dotted line;

Dashed - dashed line;

Solid - solid line;

Double - double line;

Groove - "depressed" 3D line;

Ridge - "convex" 3D line;

Inset - three-dimensional "bulge";

Outset is a three-dimensional "indentation".

Example:

H1 (border-bottom-width: 5px
border-bottom-color: red
border-bottom-style: double)

The border-style attribute allows you to specify a style for all sides of the border at once:

border-style:<стиль 1> [<стиль 2> [<стиль 3> [<стиль 4>]]]

It behaves in the same way as the similar style attributes border-width and border-color.

Example:

TD, TH (border-width: thin;
border-color: black;
border-style: dotted)

The style attributes border-left, border-top, border-right, and border-bottom allow you to set all options for the left, top, right, and bottom sides, respectively. framework:

border-left | border-top | border-right | border-bottom:

<толщина> <стиль> <цвет> | inherit

In many cases, these style attributes are preferred:

H1 (border-bottom: 5px double red)

The "global" attribute of the border style allows you to set all parameters at once for all sides of the border:

border:<толщина> <стиль> <цвет> | inherit
TD, TH (border: thin dotted black)

ATTENTION!

Frames also increase the size of the Web page element. Therefore, if we create framework for block containers that form the design of the Web page, we will have to resize these containers accordingly, otherwise they will shift and the design will be broken.

Submission for our website

We'll make some padding between the containers that shape the design of our Web pages and between the borders of these containers and their content.

The margin between the edges of the Web browser window and the content of the Web page is zero. Make the most of the space in your Web browser window.

ON A NOTE

By default, each Web browser creates its own padding between the edges of its window and the content of the Web page.

Padding on the left and right of the website header container (cheader) is 20 pixels. We'll have to move the title text away from the edges of the Web browser window, otherwise the title will look ugly.

The outer space between containers with a navbar (cnavbar) and with the main content (cmain) is 10 pixels.

Internal padding of the container with the main content (cmain) on all sides - 5 pixels each.

The top margin of the container with the main content (cmain) is 10 pixels. This will separate it from the cnavbar and cmain containers.

Padding on the left and right of the copyright container (ccopyright) is 20 pixels each. The copyright text should also be moved away from the edges of the Web browser window.

The given values \u200b\u200bof indents were obtained by the author as a result of experiments. You can ask others.

Now let's divide all four containers with frames.

The cheader container will receive frame with one bottom side.

The cmain container is a frame with one left side.

The ccopyright container is a frame with one top side.

We will make the frames thin and dotted. Set them to # B1BEC6 (light blue) as the color.

Listing 11.3 shows the revised CSS snippet of the main.css stylesheet that implements the padding and border options we chose.

Let's break it down.

To remove the padding between the borders of the browser window and the content of the Web page, we used the style attribute margin. We put it in the tag override style and gave it a value of 0 pixels:

BODY (color: # 3B4043;
background-color: # F8F8F8;
font-family: Verdana, Arial, sans-serif;
margin: 0px)

In the named cheader style, anchored to the container of the same name, we set the padding left and right to 20 pixels, and frame with only one underside. This frame will separate this container from the underlying ones:

#cheader (width: 1010px;
padding: 0 20px;
border-bottom: thin dotted # B1BEC6)

In addition, we set the width of this container to an absolute value. Remember: when displaying a container with a relative width, the Web browser will first calculate the absolute value of its width, and then add the amount of padding to it. As a result, the container will become wider than the Web browser window, and scroll bars will appear in the window, which we do not need at all. Therefore, it is best to set the width of the container to an absolute value, adjusting it so that the container is guaranteed to fit in the width of the browser window.

In the named cnavbar style, we have set a 10-pixel right padding to visually separate the cnavbar container from the cmain container:

#cnavbar (width: 250px;
height: 570px;
float: left;
margin-right: 10px)

In the named cmain style, we set padding and a border with one left side - this will separate the cmain container from the cnavbar container:

#cmain (width: 760px;
height: 570px;
float: left;
overflow: auto;
padding: 5px;
border-left: thin dotted # B1BEC6)

In the named ccopyright style, we set the left and right padding to 20 pixels and the top padding to 10 pixels. In addition, we create a border with one top side that will separate the ccopyright container from its neighbors above:

#ccopyright (width: 1010px;
clear: both;

padding: 10px 20px 0px 20px;
border-top: thin dotted # B1BEC6)

That's all. Let's save the main.css stylesheet and open the index.htm web page in a web browser. The author will not present an illustration here, since the thin frames we created are practically invisible on it. But they look very impressive on a computer screen.

Let's now look at the navigation bar. Inexpressive hyperlinks are clustered at the top of the cnavbar container, it's just a pity to look at them! .. Let's move them to the left, "sparse" them a little by creating indents, and at the same time enclose each of them in framework.

As we remember, our navigation bar is a list, and its individual hyperlinks are items in this list.

Here are the changes needed:

Shift the list that forms a strip of hyperlinks to the left by 30 pixels. This will eliminate the unattractive free space on the left after removing the markers.

The top and bottom margins of list items are 10 pixels. This will separate the hyperlinks from each other.

List items frame - thin, solid, color # B1BEC6.

Inner padding of list items: top and bottom - 5 pixels each, left and right - 10 pixels. This will separate the paragraph text from framework.

All that remains is to adjust the CSS for the main.css stylesheet accordingly (Listing 11.4).

Let's consider them in more detail.

In the named style navbar, which is bound to the list tag that forms the navbar, we've added a left margin of –30 pixels. This will shift the list to the left, filling in the empty space:

#navbar (font-family: Arial, sans-serif;
font-size: 14pt;

text-transform: uppercase;
list-style-type: none;
margin-left: -30px)

The newly created combined style will create the list items that form the navigation bar, frame and will set the appropriate padding:

#navbar LI (padding: 5px 10px;
margin: 10px 0px;
border: thin solid # B1BEC6)

Save the revised style sheet and refresh the index.htm Web page that is open in your Web browser by pressing ... It's gotten a lot better, isn't it (Figure 11.1)?

The generic border property is used to control the border of an element. This property allows you to set the width, style, and color of an element's border in a single declaration.

These three properties (width, style, and border 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 box has a different border thickness, style, and color.

Consider how you can create a shape like this using CSS:

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

• border-style - the style of the border.
• border-width - the width of the border.
• border-color - border color.

Let's consider each of the values \u200b\u200bseparately.

The 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 more than just a solid one. Valid values \u200b\u200bfor the border style are:

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

Examples of what they look like.

no border (none)

solid border

double border (double)

dotted border

dashed border

groove border

ridge border

inset border

extruded border (outset)

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

A div with a black border and ridge style.

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

Using the border-style property, the border style can be set for more than just all sides of the block. It is possible to set several values \u200b\u200bfor 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 and four values. Let's take a look at examples for each case.

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

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

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

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

Border-width property. Border thickness.

The border-width property is used to set the border thickness of an element. The border thickness can be specified in any absolute unit of measurement, such as pixels.

As with 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 \u200b\u200bfor the border-width property. There are three of them:

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

Border thickness: thin.

Border thickness: medium.

Border thickness: thick.

The border-color property. Border color.

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

• Hexadecimal notation (# ff00aa) of color.
• RGB format - rgb (255,12,110). RGBA format for CSS3.
• HSL and HSLA formats for CSS3.
• Color name, for example black. For a complete list of color names, see the CSS color names table.

The border-color property can also have one to four values \u200b\u200band handles them in the same way as the previous properties.

One value (red).

Two values \u200b\u200b(red black).

Three meanings (red black yellow).

Four meanings (red black yellow blue).

Now let's go back to the problem mentioned above and draw a shape:

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

Setting values \u200b\u200bfor sides separately

As mentioned above, you can specify border property values \u200b\u200bfor only one side of a block. For these purposes, there are properties:

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

Let me remind you that all properties have three values \u200b\u200b(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 top border of an element.

Right border options (border-right).

• border-right-color - Sets the color of the right border of an element.
• border-right-width - Sets the width of the right border of an element.
• border-right-style - Sets the style of the right border of an element.

Bottom border options (border-bottom).

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

Left border options (border-left).

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

An example of using these properties:

Border-radius property. Rounding the corners of the border.

The border-radius property is for rounding the corners of an element's borders. This property was introduced in CSS3 and works correctly in all modern browsers with the exception of Internet Explorer 8 (and older).

The values \u200b\u200bcan be any number used in CSS.

Border-radius property: 15px.

If the block frame is not specified, then rounding occurs with the background. Here's an example of rounding a box without a border but with a background color:

Border-radius property: 15px.

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

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 point is that the border-radius property can be set from one to four values. The table below lists the rules that govern such ads.

Having carefully studied this table, you can understand that the shortest record of the required style will be like this: border-radius: 15px 0. Only two values.

A little practice

Drawing a lemon using CSS.

Here is the code for such a block:

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

We have already drawn the shape:

Now let's leave a triangle from it:

The triangle code is like this:

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

Frames (block parameters)

The values \u200b\u200bof these properties are used to set the characteristics of the area around the element.
This can be applied to symbols, images, etc.

Parameters	Value	Description
border-top-color border-right-color border-left-color border-bottom-color border-color	colour (no color default)	Determines the color of the four sides of the frames. If you substitute the URL of an image for a color, the image will be repeated to form a border.
border-top-style border-right-style border-left-style border-bottom-style border-style	none (default) solid double groove ridge inset outset	Determines the style of the four sides of the frames.
border-top border-right border-left border-bottom border	frame width, frame_style, colour (default: medium, none, no color)	Determines the properties of the four sides of the frames. This works the same as the padding properties (see below), except that the border is visible. frame width can be medium, thin, or thick, or in units. frame_style can be none or solid Argument color used to define the fill color for the background of an element while it is loading, as well as behind the transparent parts of the element. If you pass the address of the image instead, the drawing will be repeated, filling the outline of the frame.
border-top-width border-right-width border-left-width border-bottom-width border-width	thin medium (default) thick length	Determines the width of the border around the element. Each side can be specified by the corresponding parameter. You can replace the setting of four individual properties by setting one property border-width same as for indent properties margin.
ciip	rect (/ top / right / bottom / left /) auto (default)	Determines how much of an element is visible. Anything outside the area specified by this parameter cannot be seen.
display	"", none "" (default)	This parameter specifies whether the item will be displayed.
float	none (default) left right	Specifies that other elements flow to the left or right of an element, rather than placing them below them. Supported by tags , ...
height	auto (default) length	The height of the element is set and measured if necessary. The value is returned as a string containing the units (px,%, etc.). The posHeight property is used to get the numeric value.
left	auto (default) length interest	Sets the horizontal coordinate of the element, allowing the elements to be positioned and moved correctly. The value is returned as a string including the units (px,%, etc.). The posLeft property is used to get the value as a number.

Example 1:
This line is underlined with a dotted line. Example 2: Different types of frames.

1.none - No border (border: none;)

2.solid - There is a border (border: 1px solid;)

Example 4: Frame with round corners.

... in tax returns;
... certificates 2-NDFL;

All of the listed documents indicate the 11-digit OKMO code instead of the previously used OKATO codes.

#org { width: 80%; margin-top: 2em; margin-left: auto; margin-right: auto; border-radius: 10px 10px; -moz-border-radius: 10px 10px; -webkit-border-radius: 10px 10px; padding: 15px 20px 15px 80px; margin: 0px 0px 0px 0px; -webkit-box-shadow: 2px 2px 3px # 999; -moz-box-shadow: 2px 2px 3px # 999; / * IE min-height hack * / min-height: 40px; height: auto! important; height: 40px; overflow: visible; Position: relative; bottom: 6px; right: 6px; border: 1px solid # 7e5a25; / * Set the position of the background image * / background-position: 20px 50%; background-repeat: no-repeat; text-align: justify; font-size: 0.9em; Background-color: # e8e3d4; background-image: url (baba.gif); }

Starting from January 1, 2014, new OKTMO codes are indicated in: ... in tax returns; ... certificates 2-NDFL; ... payment orders (field 105); ... receipt for payment of taxes, dues, duties, form PD-4 tax. All of the listed documents indicate the 11-digit OKTMO code instead of the previously used OKATO codes.

Example 5: A frame is framed with nested tables.

A.V. Suvorov

Nested tables

picture Table 1 Narrow black border (5px) Table options: table -\u003e bgcolor \u003d # 000000 style \u003d "border: 2px solid # a3852f" td -\u003e style \u003d "padding: 5px"

Example 6: Vertical frame.

Width and height of block elements

CSS properties width and height - set the width and height of block elements.
The width and height of an element can be set in the following ways:

• auto - The size of an element is determined by its content. (default)
• % - The size of the element is set as a percentage of the height / width of the parent element.
• px - The size of the element is specified in pixels or any other units of measurement accepted in CSS.

Example:

Controlling element content

What to do with the content of an element if it exceeds its size?

If the element has been given precise height and width values \u200b\u200b( height, width) and its content, for example long text, does not fit within the specified limits, then by default such an element is stretched to the required size, which is not always in the hands of the webmaster. Attribute comes to the rescue overflow which tells the browser what to do with the element in such cases.

Property overflow can have the following values:

• visible - The element is stretched to the required size. (default)
• hidden - The content of the element is "cut off" only that part of it is visible that is placed in the element.
• scroll - Scroll bars are added (always! Even if the content fits within the element).
• auto - Scroll bars are added as needed.

Example:

Result

CSS

CSS (English Cascading Style Sheets - cascading style sheets) is a formal language for describing the appearance of a document written using a markup language. Ways to connect CSS to a document
CSS rules are written in the formal CSS language and are located in style sheets, that is, style sheets contain CSS rules. These style sheets can be located both in the web document itself, the appearance of which they describe, or in separate files that have the CSS format. (Basically, the CSS format is a plain text file. The .css file contains nothing but a list of CSS rules and comments to them.) That is, these stylesheets can be included, embedded in the web document they describe in four different ways :

1. When a stylesheet is in a separate file, it can be linked to a web document using the tag located in this document between the tags and.
   (Tag will have an href attribute set to the address of this style sheet). All the rules of this table are valid throughout the entire document;

   
   .....
   
   

2. When a stylesheet is in a separate file, it can be linked to a web document using the @import directive, located in that document between tags and) immediately after the tag
   

3. When the style sheet is described in the document itself, it can be located in it between tags (which, in turn, are located in this document between the tags and). All the rules of this table are valid throughout the entire document;

   
   .....
   
   

4. When a style sheet is described in the document itself, it can be located in it in the body of some separate tag (through its style attribute) of that document. All the rules in this table apply only to the content of this tag.

   buy an elephant

Frames have many uses, for example as a decorative element or to separate two objects. CSS provides countless options for using frames.

Frame thickness

The thickness of the border is determined by the border-width property, which can be thin, medium, and thick, or a numeric value in pixels. The figure shows this system:

Frame color

The border-color property defines the color of the border. Values \u200b\u200bare normal color values, such as "# 123456", "rgb (123,123,123)", or "yellow".

Frame types

There are different types of frames. The eight frame types and their interpretation in Internet Explorer 5.5 are shown below. All examples are shown in "gold" color and "thick" thickness, but can, of course, be displayed in a different color and thickness.

The values \u200b\u200bnone or hidden can be used if you don't want to display the border.

Examples of defining frames

The three properties discussed above can be combined in each element and, accordingly, set different frames. To illustrate, take a look at a document that defines different frameworks for

,

,

and

The result may not be as impressive, but it demonstrates some possibilities:

H1 (border-width: thick; border-style: dotted; border-color: gold;) h2 (border-width: 20px; border-style: outset; border-color: red;) p (border-width: 1px; border-style: dashed; border-color: blue;) ul (border-width: thin; border-style: solid; border-color: orange;)

You can also set custom properties for the top, bottom, right, and left edges of the frame. Here's how it's done:

H1 (border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange;)

Abbreviated notation

As with many other properties, you can combine multiple properties into one using the word border. Example:

P (border-width: 1px; border-style: solid; border-color: blue;)

can be combined into:

P (border: 1px solid blue;)

Summary

In this tutorial, you learned about the limitless possibilities of CSS when using frames.

In the next lesson we will look at how to define dimensions in the box model - height and width.