Border options. Creating borders in CSS. property border. CSS border-width syntax

Vlad Merzhevich

The effect of a three-dimensional table is achieved through the simultaneous use of light and dark colors in the frame or cells, thereby creating the illusion that the table protrudes above the background of the web page. For example, the frame around a table is rendered as 3D by default. Although this type of frame is not very popular among web designers, this does not mean that such frames should not be used at all. Using styles, the table can be given a wide variety of looks, including three-dimensional ones, which can successfully stand out from their “flat” counterparts.

The thickness of the 3D frame is controlled by the border tag attribute

To create the specified table, we will take out everything possible parameters in styles, and adding a frame will be assigned to the border attribute (example 1).

Example 1: Using the border attribute

In this example, the border around the table is two pixels thick, and its appearance may vary slightly depending on the size of the table. different browsers.

Styles also allow you to create a three-dimensional table effect by using the border universal style property. The values ​​indicate the line style and its thickness, which greatly influence the final appearance of the table. In table 1 shows some values ​​and the final result.

Example 2 uses a style with a value of groove and a thickness of 5 pixels to add a border. The resulting table is shown in Fig. 2.

The border style property is applied to the TABLE selector to create a border around the table and to the TD and TH selectors to add a border to each cell. In order to avoid double lines where different cells touch, the border-collapse property is used with the collapse value (example 2).

Example 2: Create a frame using styles

This example creates a recessed gray border around the cells and the table as a whole.

We ourselves can create the effect of a three-dimensional table by correctly alternating dark and light lines in its rows (Fig. 3).

This illustration shows that the even rows of the table have a light background, a white horizontal line at the bottom, and a dark gray line at the top. However, you can interpret it the other way around and say that the odd lines have a white line on top and a dark line on the bottom.

To create the one shown in Fig. 3 tables, let's introduce an additional class called even and add it to the even rows of the table. At the same time, you cannot directly set the border property for the TR selector; in this case, the line simply will not be displayed. Therefore, we will use context selectors and add the .even TD construction, which says that for all cells located inside an element with the even class we set a line below and above. The background color can be applied to the TR selector using the background property, as shown in Example 3.

Example 3: Selecting table rows

If the bottom row of the table is even, the background of which is set in a light color in the style, then at the bottom of the table you can see a light stripe. You can live with its presence or create a new style class without a bottom line and apply it to this line.

Used to display a drawn border around an element. The thickness of the frame is set by the border property, and if border: 0 is specified, then the frame is not displayed. With other border values, the image always takes precedence. The background, if set via the background property, is displayed below the frame.

Syntax

Border-image: none | [<адрес> [<число> | <проценты>]{1,4} ? ] && {0,2}

Designations

Values

none Does not display a drawn border, the set border style is used.<адрес>Path to the graphic file. Required parameter.

The image itself for creating the frame is shown in Fig. 1 and consists of nine areas: four corners, the top, right, bottom, left side and the central part, in which the contents of the element are displayed.

Rice. 1. Image to create a frame

<число>

One, two, three, or four values ​​that indicate the size of parts of the image in pixels, thereby defining the division areas. The units themselves are not written, only the number (10, not 10px). In Fig. 2 red lines highlight the areas required to create the frame.

Rice. 2. Dividing the original image into areas

You can use one, two, three or four values, separated by a space. The effect depends on the number of values ​​and is shown in table. 1.

The influence of these parameters on the frame appearance is shown in Fig. 3.

		round

Rice. 3. Result of using stretch, repeat and round parameters

Example

The result of the example is shown in Fig. 4.

Rice. 4. Frame view

Object model

An object.style.borderImage

Note

Firefox before version 15.0 supports the -moz-border-image property.

Safari before version 6.0, Chrome before version 15.0, Android before version 4.4 support the -webkit-border-image property.

Opera up to version 15.0 supports the -o-border-image property.

Specification

Each specification goes through several stages of approval.

• Recommendation - The specification has been approved by the W3C and is recommended as a standard.
• Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it meets its goals, but requires help from the development community to implement the standard.
• Proposed Recommendation Suggested Recommendation) - at this stage the document is submitted to the W3C Advisory Council for final approval.
• Working Draft - A more mature version of a draft that has been discussed and amended for community review.
• Editor's draft ( Editorial draft) - a draft version of the standard after changes were made by the project editors.
• Draft ( Draft specification) - the first draft version of the standard.

Border-image is a property that allows you to set background image for the element frame. The property fills a frame with a given picture, distributing parts of the image so that the corner parts are in the corners of the frame, and the spaces between them are filled with the rest of the image.

This property makes it easy to do incredible things that previously required 3 to 8 pictures and manipulation of markup.

Upd: Firefox works starting from version 29.

The size of the picture is equal to the thickness of the frame. Frame color and style are ignored.

If you set only border-image-source , the image will fill the corners, not knowing what to do next:

Border: 80px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

Border-image-slice

An important property that determines the size of the piece of image that will fill the corners of the frame. The remaining parts will be used to fill the space between the corners according to the algorithm specified in border-image-repeat .

Possible values:

<проценты>- calculated relative to the image size. Horizontal relative to width, vertical - relative to height.<числа>- pixels (for bitmap) or coordinates (for vector). Units of measurement are not indicated. fill - keyword, complementing the previous values. If specified, the image is not cut off by the inner edge of the frame, but also fills the area inside the frame. Very useful for rounded frames.

To define values ​​for each side, multiple values ​​can be specified separated by a space.

The sum of the values ​​of the opposite sides must be less than the size of the picture, otherwise there will be nothing to fill the space between the corners.

Border: 80px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100;

Border-image-repeat

The property determines how the gaps between the corners will be filled.

Possible values: stretch - stretches the filling area of ​​the image. Default value; repeat - repeats the filling section, while the joints with the corner picture are visible; round - fills the gap between the corners. A seam may be visible in the middle of the side. The most careful action. space - acts similar to repeat . I didn't find any difference.

You can set two values ​​at once, the first will be responsible for the behavior of the image in the top and bottom frames, the second - for the left and right.

Border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 100; border-image-repeat: repeat;

On the left is repeat , on the right is round .

If the frame is complex and the sides do not fit well together, stretch will work more correctly, here is an example.

Border-image-width

border-image-width

The property controls the width of the visible part of the frame and scales it. If this value is greater than the border-width , the border image will crawl under the content, even if the fill property is not set.

Possible values:<длина>- values ​​in px or em;<%>- percentage values ​​relative to the image size;<числа>- numeric value by which border-width auto is multiplied - keyword. If given, the value is equal to the corresponding border-image-slice . If there is no suitable size, the border-width value is used, and the image fills the entire corner of the frame, crawling under the content. It works a little strange.

Border: 60px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 80; border-image-repeat: round; border-image-width: 160px;

On the right is a frame with border-image-width . The example on the left shows how the picture was cropped by the inner edges of the frame. Due to the increased width, the right frame has crawled under the content.

Border-image-outset

An interesting property that allows you to move the frame outside the element. Negative values are not supported.

Possible values:<длина>- values ​​in px or em;<числа>- the numeric value by which border-width is multiplied.

Border: 60px solid transparent; border-image: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); border-image-slice: 120; border-image-repeat: round; border-image-outset: 60px 10px 50px 120px;

On the right is an example with border-image-outset . This property does not affect the size of the element, and the frame can overlap adjacent elements.

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

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

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

border-width

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

You can set the width 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;

border

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.

Description

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

Syntax

border-style: (1,4) | inherit

Values

Several values ​​for the border-style property are provided to control the appearance of the border. The appearance depends on the browser used and the border thickness set. In table 1 shows the names of the styles and the resulting frame when different meanings thicknesses - 1, 3, 5 and 7 pixels.

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

None Does not display the border and its thickness (border-width) is set to zero. hidden Has the same effect as none except applying border-style to table cells that have the border-collapse property set to collapse . In this case, the border around the cell will not appear at all. inherit Inherits the value of the parent.

You can use one, two, three or four values, separated by a space. The effect depends on the quantity and is indicated in the table. 2.

HTML5 CSS2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

The result of this example is shown in Fig. 1.

Rice. 1. Applying the border-style property

Object model

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

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 hidden and inherit values.

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