Frame options border left style. Creating borders with CSS

Vlad Merzhevich

With CSS, you can add a border to an element in several ways. Basically, of course, the border property is used, as the most versatile, as well as outline and, surprisingly, box-shadow , whose main task is to create a shadow. Let's take a look at these methods and their differences.

outline property

The simplest property for creating frames. It has the same parameters as border , but differs significantly from it in some details:

• outline is drawn around the element (border inside);
• outline does not affect the size of the element (border is added to the element's width and height);
• outline can only be set around the entire element, not on individual sides (border can be used on any side or all at once);
• the outline is not affected by the rounding radius specified by the border-radius property (it does affect the border).

The question arises - in what cases is outline needed, when its role, despite the listed differences, is completely taken over by border ? There are not so many situations, but they occur:

• creating complex multi-colored frames;
• adding a frame to an element when hovering over it with the mouse cursor;
• Hiding the frame added automatically by the browser for some elements when it receives focus;
• for outline, you can set the distance from the edge of an element to the border using the outline-offset property, to create a .

Multicolored frames

It must be understood that outline in no way replaces border and may well exist with it, as shown in example 1.

Example 1: Create a frame

In this example, a black border is added around the element, which is separated from the background by a white border (Fig. 1).

Rice. 1. Border around the element

Frame when using:hover

Adding a border across the border increases the width of the element, which is quite noticeable when combining border and the :hover pseudo-class. There are two ways how to "win". The simplest is to replace the border with an outline , which we know has no effect on the size of the element (example 2).

Example 2: Frame on hover

outline is not always suitable, if only because it is not affected by rounded corners. The second method is suitable here - add an invisible border or a border that matches the background color, and then change its parameters on hover (example 3). Then no displacement of the element will occur, since the frame is already there initially. But always remember that the width of the element is the sum of the values ​​of width , border on the left and border on the right. The same is true with height.

Example 3: Frame on hover

Border around form fields

Some browsers (Chrome, Safari, latest versions Opera) around the form fields, when they receive focus, a small colored frame is displayed (Fig. 2). To remove it, it is enough to add the value none to the outline property in the styles, as shown in example 4.

Rice. 2. Frame around fields

Example 4. Remove the frame

Frames via box-shadow

Although the box-shadow property is intended to add a shadow around an element, it can also be used to create borders, and ones that cannot be done with border or outline . This is due to the fact that the number of shadows can be unlimited, the parameters of which are listed separated by commas.

To get a frame, the first three parameters should be set to zero, they are responsible for the position of the shadow and its blur. The fourth parameter in this case is responsible for the thickness of the border, and the fifth sets the color of the frame. For the second frame, the fourth parameter is equal to the sum of the thicknesses of the two frames.

Example 4 shows how to add two boxes and one border to the right using a single box-shadow property.

Example 4: Using box-shadow

Result this example shown in fig. 3.

Rice. 3. Frames created by the box-shadow property

The border generic 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 color of the border) can be set in a single declaration. Here is an example:

You can only specify a border style on 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 its own border thickness, style, and color.

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

Border values ​​- 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 - the color of the border.

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

The border-style property. Border style.

The border-style property sets the border style. In CSS, unlike HTML, an element's border can be more than just solid. Valid values ​​for the border style are:

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

Examples of what they look like.

no border (none)

solid border (solid)

double border (double)

dotted border (dotted)

dotted border (dashed)

groove border (groove)

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 the following result.

A div block 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 shadow effect, and the black effect on the black border is not visible.

With the help of 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 the same 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 one for the sides, the third one for the bottom.

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

The border-width property. Border thickness.

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

Like the border-style property, the property can also be set to one to four values. Consider examples for each case.

Example code:

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

• 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 facility is used to control the color of the border. Colors for this property can be set using any of the methods described in the Colors in CSS article, namely:

• The hexadecimal notation (#ff00aa ) of the color.
• The RGB format is rgb(255,12,110) . RGBA format for CSS3.
• HSL formats and HSLA for CSS3.
• The name of the color, for example black (black). Full list The color names are listed 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 task voiced above and draw a figure:

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

Setting values ​​for sides separately

As mentioned above, you can only specify border property values ​​for 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 for all properties, three values ​​\u200b\u200bare 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 top border of an element.
• border-top-width - sets the width of the top border of an element.
• border-top-style - sets the style of the top border of the element.

Right border options (border-right ).

• border-right-color - sets the color of the element's right border.
• border-right-width - sets the width 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 bottom border of an element.
• border-bottom-width - sets the width of the bottom border of an 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 element's left border.
• border-left-style - sets the style of the element's left border.

An example of using these properties:

The 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 except Internet Explorer 8 (and older versions).

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

property border-radius: 15px.

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

property border-radius: 15px.

There are properties for rounding each individual corner of an element. 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;

property border-radius: 15px.

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

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

A little practice

Draw 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;

Property css – « border”, allows you to set the thickness, color and type of the line around the perimeter around the element. Options given property can be written on one line, separated by spaces, and in any order.

• - line thickness one pixel
• - solid line
• - White color
• - black color
• - grey colour

Solid element border

dashed element border

Dotted element border

Element border double line

Property of individual sections of the border

Depressed corrugated frame in volume

Convex corrugated frame in volume

Volumetric depressed frame

Volumetric convex frame

Lessons / CSS /

Lesson 7

Almost every site uses a property that creates a border around an element. It is needed either for buttons or for blocks with text. To create a border, an element in CSS has two properties: border and outline. Let's consider them.

border

This property is needed to set a frame around the element, indicates its border in the web document, the width of the frame is taken into account when positioning the element. It has 3 values ​​- color, thickness and frame type.

The syntax for the border property is as follows:

border: Width Type Color;
You can also choose a different order for specifying property values, but the main thing is through a space.

The thickness (width) of the frame must be specified in pixels (px) or percentages (%).
The color can be specified either in RGB (Red Green Blue) format or in HTML HEX code.

Below are LINE TYPES with their names:

How to set borders for an element? We do it as follows:

#block(
border:3px solid #0085ss; /* set the line to be 3px thick blue */
}

If you want to install one, two or three frame on one side, then specify as follows:

border top- top frame
border-bottom- bottom frame
border-left- frame on the left;
border-right- frame on the right;

Block (
border-right: 3px solid #0085cc;
border-bottom: 2px dashed #0085cc;
}

If you want to remove frames element in CSS, then write in the property border - none

empty(
border: none /* element with class empty will not have border */
}

outline

Outline is a property that is needed to set the outer border of an element.

There is two differences from border:
First, the line specified in the outline will NOT affect the position of the block itself, its width and height.
Secondly, there is no possibility of installing a frame from a certain side.
The syntax is the same as border.

outline: 2px dotted #0085cc; /* border 2 px dotted blue */
For outline, as well as for border, you can remove the borders by writing none:

Thank you for your attention!

Previous article
Lesson 6

Element borders.

Padding and margins in CSS. What is margin and padding? Next article
Lesson 8. How to set the text color and background of an element in CSS?

Comments on the article (vk.com)

border

Browser Support

12.0+	4.0+	1.0+	1.0+	3.5+	1.0+

Description

The CSS property allows you to set the width, style, and color for the block border at the same time. The block border is a simple line/frame that surrounds the block on all sides. It should be borne in mind that when adding a frame, it will affect the overall size of the block.

The values ​​are separated by a space and can be in any order, the browser will determine which one matches the desired parameter. It is not necessary to specify all three values, the width and/or color can be omitted, in which case the value that is set for the default property will be used instead of the missing value, i.e. if for example no width is specified, then the property's default value will be used. The table below the syntax shows the values ​​of which properties can be used.

Note: To set borders only on certain sides of an element, use the following properties: border-top, border-bottom, border-left, border-right.

Tip: As a rule, when using a border, you need to add padding.

CSS property: border

They add white space between the block border and its content: text, images, or child tags. Usually the border is displayed close to the content of the element, this is only useful if you need to set a border around the image.

Syntax

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

Property values

Example

There is some text here.

The result of this example in a browser window:

How to set the color, style and size of the border in the boxes.

In markup languages, the border( border), have only tables, pictures and frames, in some cases it is possible to set the color of the border and that's it.

border attribute

Cascading Style Sheets give us more options, but first things first.

In CSS, we can control the width of the border (border) with border-width, and to be more precise, we can control the thickness of each side separately:
border-top-width- top border thickness
border-right-width- thickness of the right curb
border-bottom-width- bottom border thickness
border-left-width- thickness of the left border
But it can also be shortened:
P(border-width:top right bottom left;)(top right bottom left).
Border width can be set:
figures DIV(border-width:5px), from zero to infinity, i.e. positive.
thin- thin border, DIV(border-width:thin)
medium- middle border, DIV(border-width:medium)
thick- thick border, DIV(border-width:thick)
It’s clear with numbers, but with these values ​​it all depends on the browser, but still thin<= medium <= thick .

We can also control the color of the border with border color or to be more precise the color of each side:
border-top-color top border color
border-right-color color of the right border;
border-bottom-color color of the lower border;
border-left-color border color on the left side.
The color value is set as for color, i.e. one of 16 colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white or yellow, you can also set colors: color:#000000, color:#AF0 , color:rgb(255,0,0) or color:rgb(100%, 0%, 0%).
No matter what color scheme you choose, browsers will still translate it into color:rgb(255,0,0). For example color:lime = color:#00ff00 = color:#0F0 = color:rgb(0%, 100%, 0%), but it doesn't matter to the browser color:rgb(0,255,0), i.e. it will calculate this value.

If the thickness and color of the border can also be controlled by HTML, then the style ( border style) only CSS!!!
The style can be controlled by each side separately:
border-top-style top border style;
border-right-style right border style;
border-bottom-style bottom border style;
border-left-style border style on the left side.
Now consider the values ​​of styles:
1)border-style:none- This is the default value, similar to border-width:0.
2)border-style:hidden- The same, except for tables (table), which we will consider later.
3)border-style:dotted- A border of dots.
4)border-style:dashed— Border from a dotted line.
5)border-style:solid- Solid line border, i.e. like in HTML.
6)border-style:double- A border of a double solid line, here you need a thickness (border-width) of at least 3 pixels.
7)border-style:groove- The border looks like it's been cut into canvas.
8)border-style:ridge— The border looks like it's protruding from the canvas.
9)border-style:inset- The whole box looks like pressed into the canvas.
10)border-style:outset- The opposite of the previous one.
Some browsers may ignore the dotted, dashed, double, groove, ridge, inset and outset values ​​and output them as solid, i.e. ordinary border.

All of course this is true, but all the examples above are only the principle of operation, and not a mechanism.
Rule Property border implies (border: size style color;), this rule is executed if all three values ​​are present and only in this order, for example H1(border: 5px double red;), but there may be exceptions if these values ​​are provided by markup languages, for example, for a table TABLE(border: 2px), i.e. only one value is given.

In order to manage not the entire curb, but each part separately, there are rules:
(border-top: size style color;) Upper curb control;
(border-right: size style color;) Curb control on the right;
(border-bottom: size style color;) Lower curb control;
(border-left: size style color ;) Curb control on the left.
These rules can be used individually or all together.

The exception is this rule:
H1(
border: 4px solid green;
}
The thing is that in CSS the last rule has the highest priority, in this case the border property contains border-left and therefore the border-left rule will be ignored, right like this:
H1(
border: 4px solid green;
border-left: 2px double red;
}
First, we set the rules for the entire curb, and then for individual sections.

I have everything about borders for elements, except that we will consider some properties when we get to tables and other exceptions.

css: border. Element borders.

CSS3 Borders

CSS3 Borders

With CSS3, you can create rounded borders, add shadows to containers, and use an image as a border—all without using a design program like Photoshop.

In this lesson, you will learn about the following border properties:

• border-radius
• box shadow
• border-image

Browser Support

Property	Browser Support
border-radius
box shadow
border-image

Internet Explorer 9 supports some of the new border properties.

Firefox requires the -moz- prefix for border-image.

Chrome and Safari require the -webkit- prefix for border-image.

Opera requires -o- for border-image.

Safari also requires the -webkit- prefix for box-shadow.

Opera supports new border properties.

CSS3 Rounded Corners

Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.

In CSS3, creating rounded corners is easy.

In CSS3, the border-radius property is used to create rounded corners:

This block has rounded corners!

CSS3 Container Shadow

In CSS3, the box-shadow property is used to add a shadow to boxes:

CSS3 Border-Image

With the CSS3 border-image property, you can use an image to create a border:

The border-image property allows you to specify an image border!

The original image used to create the border is yours:

New Border Properties

border attribute

border attribute, tag

, used to specify the thickness of the border around the table.

HTML Borders

It is acceptable to use border without values, then the border thickness will be equal to one pixel. By default, the frame is displayed with 3D effects, but if you additionally apply the background attribute, the frame will become "flat".

In addition, if the border attribute has a non-zero value, then browsers also show thin borders around the cells themselves. The display of these borders can be controlled using the rules attribute.

Values

The attribute value can be any non-negative number specifying the size in pixels.

Default value: 0.

Syntax

Required attribute: none.

HTML Example: Applying the Border Attribute

Example result

Result. Applying the border attribute.

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

The border-left-width , border-top-width , border-right-width , and border-bottom-width style attributes 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 relative numeric value for the border thickness, or one of the predefined values: thin (thin), medium (medium) or thick (thick). In the latter case, the actual thickness framework depends on the web browser. The default thickness also depends on the Web browser, so it's 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 creates the first level of all headings frame from the bottom side alone, 5 pixels thick:

H1 ( border-bottom-width: 5px )

In fact, all first-level headings will be underlined.

The border-width style attribute allows you to specify width values ​​for 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 ​​are specified, the first will set the thickness of the top and bottom, and the second will set the thickness of the left and right sides of the frame.

If three values ​​are specified, the first will set the thickness of the top, the second the left and right, and the third the bottom.

If four values ​​are specified, the first will set the thickness of the top, the second the right, the third the bottom, and the fourth the left. framework.

Example:

TD, TH ( border-width: thin )

The border-left-color, border-top-color, border-right-color, and border-bottom-color style attributes 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 specifies a "transparent" color through which the background of the parent element will "shine through".

ATTENTION!

The border color should always be set explicitly - otherwise it might 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 define the style of the lines that will be used to draw the left, top, right, and bottom sides, respectively. 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 ​​are available here:

None and hidden - there is no frame (usual behavior);

Dotted - dotted line;

Dashed - dashed line;

Solid - solid line;

Double - double line;

Groove - "depressed" three-dimensional line;

Ridge - "convex" three-dimensional line;

Inset - three-dimensional "bulge";

Outset - three-dimensional "recess".

Example:

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

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

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

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

Example:

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

The border-left, border-top, border-right, and border-bottom style attributes allow you to set all the 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" style attribute border allows you to set all parameters at once for all sides of the frame:

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

ATTENTION!

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

Presentation for our website

Let's make some space between the containers that form 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.

Inner padding in the container with the title of the Web site (chheader) on the left and right - 20 pixels each. We'll have to move the title text away from the edges of the browser window, otherwise the title will look ugly.

The margin between the containers with the navigation bar (cnavbar) and the main content (cmain) is 10 pixels.

The padding of the container with the main content (cmain) on all sides is 5 pixels.

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

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

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

Now let's separate all four containers with frames.

container chheader will receive frame with one bottom side.

The cmain container is a frame with one left side.

Container ccopyright - a frame with one top side.

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

Listing 11-3 shows the corrected CSS snippet of the main.css stylesheet that implements the padding and border options we've chosen.

Let's break it down.

To remove the padding between the borders of the Web browser window and the content of the Web page, we used the margin style attribute. 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 chheader style bound to the container of the same name, we set the left and right padding to 20 pixels, and frame with only one underside. This frame will separate this container from the underlying ones:

#header( width: 1010px;
padding: 020px;
border-bottom: thin dotted #B1BEC6 )

We also set the width of this container to an absolute value. Recall that 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. This will cause the container to be wider than the browser window, and the window will have scrollbars, which we don't want at all. Therefore, it is better to set the width of the container to an absolute value, choosing it so that the container is guaranteed to fit in the width of the Web browser window.

In the named cnavbar style, we have specified a 10px margin to the right - this will visually separate the cnavbar container from the cmain container:

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

In the cmain named style, we have given 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 frame with one top side that separates the ccopyright container from its upstream "neighbors":

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

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

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

Let's look at the navigation bar now. Unimpressive hyperlinks crowded at the top of the cnavbar container, it's just a pity to look at them! framework.

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

Here are the required changes:

Move the list that forms the hyperlink strip to the left by 30 pixels. This is how we eliminate the free space on the left that has formed after the removal of the markers, which looks ugly.

The margins of the list items above and below are 10 pixels. This is how we separate the hyperlinks from each other.

The frame of the list items is thin, solid, color #B1BEC6.

Indents of list items: top and bottom - 5 pixels each, left and right - 10 pixels each. This is how we separate the paragraph text from framework.

It remains only to correct the CSS code of the main.css style sheet accordingly (Listing 11.4).

Let's consider them in more detail.

In the named navbar style attached to the list tag that forms the navigation bar, we've added a left padding of -30 pixels. This will move the list to the left, filling 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 combo style will make the items in the list that forms the navigation bar frame and set the appropriate indents:

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

Let's save the corrected style sheet and update the index.htm Web page opened in the Web browser by pressing the key . It's gotten a lot better, hasn't it (Figure 11.1)?

To the creation of various beauties around him, and the first such beauty will be the frame.

First, let's look at the simplest frames. To create them, CSS uses the border property, which can be set to the following values:

solid - solid frame;

dashed - dotted frame;

dotted - dotted frame;

double – double line frame;

groove - a frame with a shadow;

ridge - with relief;

Two more properties needed to create simple frames are

widtht - frame thickness;

color - frame color;

According to the abbreviation technique, values ​​are written in one line, separated by a space.

p(
border : 2px solid #ffff00 ;
}

padding - internal (frame indent from the content);

margin - external (frame indentation from external objects);

For indents, directions are also given (from which side to retreat). These properties are used when there is a need to place content not in the center of the frame, or the frame itself with some kind of offset.

top - indent from above;

righnt - indent to the right;

bottom - bottom indent;

left - left indent

The values ​​of these properties are written in shorthand one after another (padding: 10px 30px 15px 20px ), and the top value is set first, and then the rest clockwise.

If you put only one value, it will mean that the indent on all sides will be the same.

p(
border : 2px solid #ffff00 ;

margin : 20px ;
}

If you want to place text or an image in the center of the frame, then you can add the text-align: center property to the "p" selector;

Next, consider how the height and frame width. The height of the frame is set automatically by the browser, and is chosen in such a way that the content fits in it, taking into account the specified indents. But we will set the width ourselves.

It is set by the width property, and its value indicates the desired size in pixels, or other measures of length accepted in the web.

p(
border : 2px solid #ffff00 ;
padding : 10px 20px 10px 20px ;
margin : 20px ;
width : 400px
}

By the way, remember that when setting the width, the browser understands this value as the width of the content only. Then it adds the specified margins and border thickness to this value, and displays the final size on the page.

And the last thing to do is to position the frame on the page. This is done using the already existing margin property.

And if you just need to position the frame block in the center of the page, then the auto value is added to the margin property.

p(
border : 2px solid #ffff00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px
}

For the first example, let's create an html document, and create a solid frame for the body block (document body), and one paragraph.

In the following examples, only the CSS (what is wrapped in the style tag) will change.

Hello dear future webmasters!
I am 55 years old and I am glad to welcome you to my website.

Result:

The next frame is dashed.

p(
text-indent : 30px ;
border : 2px dashed #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px
}

Result:

frame dotted :

p(
text-indent : 30px ;
border : 3px dotted #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px
}

frame double :

p(
text-indent : 30px ;
border : 5px double #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px
}

frame groove :

p(
text-indent : 30px ;
border : 7px groove #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px
}

Frame ridge :

p(
text-indent : 30px ;
border : 10px ridge #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px
}

To do this, remove the border , and add a border-radius and box-shadow .

p(
border-radius : 10px ;
box-shadow : 0 0 0 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px
}

Blur the outer edge of the frame. To do this, in the box-shadow property, increase the third digit.

p(
border-radius : 10px ;
box-shadow : 0 0 7px 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px
}

Let's make a colorful frame. To do this, in the box-shadow property, separated by commas, add a few more sets of values ​​with different colors.

p(
border-radius : 10px ;

0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px
}

You can make a circle in a frame. To do this, set the paragraph to the same height and width, that is, make a square, change the border-radius value

p(
border-radius : 50%/50% ;
box-shadow : 0 0 0 3px #ff4f00 ,
0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
padding: 40px
margin : 20px auto ;
width : 130px
height : 130px ;
text-align : center;
}