How to create outer page border css. border-image-source

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 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 several values ​​for one border-style property; depending on the number of values, the border style will be assigned different number sides of the block. You can set one, two, three or four values. Let's look at examples for each case.

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

Two values ​​(solid double) - the first value set the style for the top and bottom sides, 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 set in any absolute units measurements, 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 formats and HSLA for CSS3.
• Color name, for example black. Full list Color names are given in the CSS color names table.

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

One value (red).

Two values ​​(red black).

Three values ​​(red black yellow).

Four values ​​(red black yellow blue).

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

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

Setting values ​​for sides separately

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

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

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

Top border options (border-top).

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

Right border options (border-right).

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

Bottom border options (border-bottom).

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

Left border options (border-left).

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

An example of using these properties:

The border-radius property. Rounding border corners.

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

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

Border-radius property: 15px.

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

Border-radius property: 15px.

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

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

Border-radius property: 15px.

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

Having carefully studied this table, you can understand that the 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;

CSS3 frame extends the ability to format element borders with properties that allow round the corners element, and also use Images to design the borders of the element.

Rounded corners and picture frames

1. Rounding corners with border-radius

Browser support

IE: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 44

The property allows you to round the corners of lowercase and block elements. The curve for each angle is defined using one or two radii defining its shape − circle or ellipse. The radius applies to the entire background, even if the element has no border, the exact position of the secant is determined using the background-clip property.

The border-radius property allows you to round all corners at once, and using the border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius properties you can round each corner separately .

If you set two values ​​for the border-radius property, the first value will round the top left And lower right corner, and the second - top right And bottom left.

Values ​​specified through / determine horizontal And vertical radii. The property is not inherited.

Options

Div (width: 100px; height: 100px; border: 5px solid;).r1 (border-radius: 0 0 20px 20px;).r2 (border-radius: 0 10px 20px;).r3 (border-radius: 10px 20px ;) .r4 (border-radius: 10px/20px;) .r5 (border-radius: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (border-radius: 10px 20px 30px 40px/30px;) .r7 ( border-radius: 50%;).r8 (border-top: none; border-bottom: none; border-radius: 30px/90px;).r9 (border-bottom-left-radius: 100px;).r10 (border -radius: 0 100%;).r11 (border-radius: 0 50% 50% 50%;).r12 (border-top-left-radius: 100% 20px; border-bottom-right-radius: 100% 20px ;)
Rice. 1. Examples various options rounding block corners

2. Border-image

Browser support

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 42

The property allows you to set an image as the element's frame. The main requirement for the image is that it must be symmetrical. The property includes the following values: (border-image: width source slice repeat outset;) .

With the help of this simple image You can get these frames for an element.

/* Example 1 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: stretch; ) /* Example 2 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round. png); border-image-slice: 30; border-image-repeat: round);
Rice. 2. An example of designing block boundaries using an image

Cuts A - B - C - D form the corners of the frame, and the part of the image located between them fills the remaining space of the frame in accordance with the specified value of the border-image-repeat property. Corner size (in in this example this is the number 30) is specified using the value of the border-image-slice property.

2.1. border-image-width

The property specifies the width of the image for the element's border. If the width is not specified, it defaults to 1.

border-image-width
Values:
length	Sets the border width in length units - px / em . You can set from one to four values ​​at a time. If one value is specified, then the width of all sides of the frame is the same, two values ​​specify the width of the top-bottom and right-left, etc.
number	The numeric value by which the border-width value is multiplied.
%	The width of the element's frame is calculated relative to the size of the image. Horizontal relative to width, vertical - relative to height.
auto	Corresponds to the border-image-slice value.
initial
inherit

Syntax

Div (border-image-width: 30px;) Fig. 3. An example of setting the width of an image frame using various types values

2.2. border-image-source

The property specifies the path to the image that will be used to decorate the block boundaries.

Syntax

Div (border-image-source: url(border.png);)

2.3. border-image-slice elements

The property determines the size of the image parts used to define the borders of the element and divides the image into nine parts: four corners, four edges between the corners, and a central part.

Values:
number	The size of the frame parts can be set using one, two, three or four values. One value sets the borders to be the same size on each side of the element. Two values: the first determines the size of the top and bottom borders, the second - the right and left ones. Three values: the first determines the size of the top border, the second - the right and left, and the third - the bottom border. Four values: Defines the sizes of the top, right, bottom, and left borders. The numeric value represents the number of px.
%	Border sizes are calculated relative to the image size. Horizontal relative to width, vertical - relative to height.
fill	The value is indicated along with a number or percentage. If specified, the image is not cut off by the inner edge of the frame, but also fills the area inside the frame.
initial	Sets this property to its default value.
inherit	Inherits the value of this property from the parent element.

Syntax

Div (border-image-slice: 50 20;)
Rice. 4. An example of specifying image frame slices

2.4. border-image-repeat

This property controls how the background image fills the space between the corners of the frame. Can be specified using either a single value or a pair of values.

Syntax

Div (border-image-repeat: repeat;) Fig. 5. Example of repeating the central part of an image frame using different types of values

2.5. border-image-outset

The property allows you to move the image frame beyond the borders of the element by a specified length. Can be specified using either one or four values.

Syntax

Div (border-image-outset: 10px;)
Rice. 6. An example of shifting an image frame using different types of values

3. Outer frame offset outline-offset

The property specifies the distance between the border element's border and the outer border created using the outline property.

/*Figure 1:*/ img ( border: 1px solid pink; outline: 1px dashed gray; outline-offset: 3px; ) /*Figure 2:*/ img ( border-width: 1px 10px; border-style: solid; border-color: pink; outline: 1px dashed gray; outline-offset: 3px;
Rice. 7. An example of decorating an image with an outer frame

4. Gradient frame

The value of border-image can be not only an image, but also a gradient fill.

Translucent frame

Transparent is one of the colors. In this way, you can set boundaries for all sides of an element at once or separately for each side. The thickness of the border is controlled by the border-width property.

* (box-sizing:border-box;).wrap ( height: 200px; padding: 25px; background: #00E4F6; ) .gradient ( height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent ; border-image: linear-gradient(to right, transparent 0%, #ADF2F7 100%);

Postal envelope

* (box-sizing:border-box;).wrap ( height: 200px; padding: 25px; ) .gradient ( height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent; border-image: 10 repeating-linear-gradient(45deg, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px, transparent 30px, transparent 40px )

Let's look at some document. HTML elements are formed on it (displayed on the screen in the browser). They are formed based on tags. You place tags, they are processed by the html parser (available in any browser) and builds html elements. And what these elements will look like is determined by CSS.

All html elements have 4 areas: padding area, border, padding and element content. What are they needed for?

• Margins are needed to regulate the interaction of this element with the borders of other elements.
• Padding is the distance from the frame to the content of a given element.
• The content of the element itself. It’s clear here. If there are nested elements, then they are located in this area.
• Frame (border). Outlines the boundaries of an element. Schematically, the 4 areas can be represented as follows:

It should be understood that each element lies within some area. This area for the element that lies inside it is called a container. Those. The container is the content area of ​​the parent element. This area determines the space for building the internal element. This means that the internal element will adjust to the size of this area.

Margins

This is when our element interacts with the boundaries of the container and with the boundaries of neighboring elements (those that are located next to it in the code). Basic Rules:

• margin-top: auto|magnitude|% - top margin.
• margin-right: auto|magnitude|% - right margin.
• margin-bottom: auto|magnitude|% - bottom margin.
• margin-left: auto|magnitude|% - left margin.
• margin: margin-top margin-right margin-bottom margin-left – a prefabricated rule.

The value “auto” means that the browser will independently parse these values. The indent size can be specified in the following values: em, ex, px. Percentages (%) are calculated from the width of the container (from the content area of ​​the parent element). If you specify a negative value, the borders of elements inside the parent container will collide with each other.

The “margin” rule is a composite one; the values ​​of all 4 margins are indicated here (starting from the top and clockwise). Examples:

Margin: 10px 20px 20px 30px;

margin: 10px 20px 30px;

- the margin from left to right is the same margin: 10px 20px;

• - the margin from top-bottom and left-right is the same margin: 10px;
• - all indents are the same
• Padding
• There cannot be negative values ​​here, because It is impossible to move content beyond the element's frame. Percentages are calculated based on the width of the container.
• padding-top: value|%.

padding-right: value|%.

padding-bottom: value|%.

• padding-left: value|%.
• padding: padding-top padding-right padding-bottom padding-left - prefabricated rule. Similar to “margin”.
• Borders in CSS

All frames have the following characteristics:

• Thickness - border-width: value (thin|medium|thick). Default is medium.
• Color - border-color: color. Default is the font color in this element.
• Type - border-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset. Types: no frame | dots | dotted | solid | double | relief imitation.
• The rules of the framework themselves:
• border-top- (width|color|style).

border-right- (width|color|style). border-bottom- (width|color|style). around the element. A very interesting effect for page design, but it will only work in new versions of browsers that support box-shadow .

However, there are several other methods to create this effect. Moreover, the obvious use background image is very far from ideal.

IN this lesson Five methods are presented for creating a double border around an element. Moreover, only one of them requires an image, and all the others use clean code CSS with excellent browser support.

Method 1: border and outline

This method only works in browsers that support the outline property (all except IE6/7). You add both border and outline properties to the element.

One ( border: solid 6px #fff; outline: solid 6px #888; )

The reason this method works is that outline frame is always displayed on the outside of the rectangle. The issue with the outline property occurs when using floating elements, because the border overlaps with adjacent elements.

Method 2: Pseudo Element

This method requires absolute positioning framework:

Two ( border: solid 6px #fff; position: relative; z-index: 1; ) .two:before ( content: ""; display: block; position: absolute; top: -12px; left: -12px; border: solid 6px #888; padding-bottom: 12px; z-index: 10)

The key points are setting the z-index property (so that the pseudo element overlaps the content), positioning, and the min-height value. The latter property preserves the elasticity of the frame.

Method 3: Shadow

Most best method, since only one line of code is required with the box-shadow property settings.

Three ( box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888; )

Two shadows are used to make the double frame appear. They are separated by commas. The blur is set to 0. Since the second shadow overlaps the first, it has twice the greater width. Key moment- the use of opaque colors, which creates a clear boundary between the frames.

Like the outline property, box-shadow does not affect adjacent elements and can overlap them. Therefore, you need to set the field for forming appearance compositions.

Naturally, support for the box-shadow property is limited to newer browsers.

Method 4: Additional div element

IN this method used external element