How to make table borders colorless in html. Border-color: border color. Using the cellspacing attribute

Inner border. border property

Each element has a border. By default it is invisible. The border design is specified using border properties.

The border property is a universal property that allows you to simultaneously specify the values ​​of all properties related to the design of an element's border: border-width , border-style and border-color .

The values ​​of the above properties are indicated separated by a space, in any order. And the browser automatically determines whether the value belongs to the property.

It is not necessary to specify the values ​​of all properties. Properties that are not used are assigned default values. Only the border-style property needs to be set to something other than none for the border-width property to take effect.

The border-top , border-right , border-bottom , and border-left properties are similar to the border property, but allow you to apply styling only to the top, right, bottom, and left borders of an element, respectively.

Border Thickness

The border-width property specifies the width of an element's border for all its sides or individually for each.

The border thickness is specified in pixels ( indicates a positive integer) or in other units accepted in CSS. You can also specify the border width using keywords thin , medium and thick , which set the thickness to 2, 4 and 6 pixels respectively.

The border-top-width , border-right-width , border-bottom-width , and border-left-width properties set the border thickness for each of the corresponding sides of an element individually.

And let us remind you once again: for the border-width property to take effect, you must assign the border-style property any value other than none .

Properties apply to all elements.

Border style

The border-style property sets the border style of an element for all its sides or individually for each.

The style is specified using the keywords none , solid , double , dashed , dotted , groove , ridge , inset and outset , which set the line type.

Minimum width for a double solid line border ( double value) is 3 pixels. Otherwise it will appear solid.

The border-top-style , border-right-style , border-bottom-style , and border-left-style properties set the border style for each of the corresponding sides of the element individually.

Properties apply to all elements.

Border color

The border-color property sets the border color of an element for all its sides or individually for each.

The color is set using one of the CSS methods

The border-top-color , border-right-color , border-bottom-color , and border-left-color properties set the border color for each of the corresponding sides of the element individually.

Properties apply to all elements.

From 1 to 4 values

When setting a border style for the border-width , border-style and border-color properties, you can specify from 1 to 4 values, separated by a space. The result depends on the quantity and is shown in the table:

External border. outline property

An outer border, unlike the border specified by the border property, does not affect the position of the element.

Styling for the outer border is set using the outline property.

The outline property, similar to the border property, is a universal property that allows you to simultaneously specify the values ​​of all properties associated with the design of the outer border of an element: outline-width, outline-style and outline-color.

Property values ​​are indicated separated by a space, in any order. And the browser automatically determines whether the value belongs to the property.

It is not necessary to specify the values ​​of all properties. Properties that are not used are assigned default values. Only the outline-style property needs to be set to something other than none for the outline-width property to take effect.

Properties apply to all elements.

The outline-width , outline-style , and outline-color properties have the same values ​​as the border-width , border-style , and border-color properties, respectively.

Code snippet:

border-bottom:

#CC3333 solid 3px

;

padding:

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.

Borders in CSS

A div block with a 3px border in red. 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). A div with different borders.

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 allowed 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, the second for the side.

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

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

The border-width property. Border thickness.

To set the width of an element's border, use the border-width property. The border thickness can be specified in any absolute units of measurement, for example in pixels.

Like the border-style property, the property can also be set to one to four values. Let's look at examples for each case.

Example code:

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

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

Border thickness: thin.

Border thickness: medium.

Border thickness: thick.

The border-color property. Border color.

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

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

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

One value (red).

Two values ​​(red black).

Three values ​​(red black yellow).

Four values ​​(red black yellow blue).

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

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

Setting values ​​for sides separately

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

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

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

Top border options (border-top).

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

Right border options (border-right).

• border-right-color - sets the color of the 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.

Options lower limit(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 most short note the 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; /* Place the block in the center */ padding: 0px; width: 0px; height: 0; border: 30px solid white; border-bottom-color: red;

The tables themselves look rather poor, and browsers display some table characteristics, in particular, frames, in their own way. At the same time, these shortcomings can be easily corrected by using the power of styles. At the same time, the means for designing tables are greatly expanded, which allows you to successfully fit tables into the site design and present tabular data more clearly.

Cell background color

All background colors at the same time table cells is set via the background property, which is applied to the TABLE selector. In this case, you should remember the rules for using styles, in particular, the inheritance of element properties. Although the background property is not inherited, the default background value for cells is transparent, i.e. transparency, so the background fill effect is also obtained for the cells. If, simultaneously with TABLE, you set a color for the TD or TH selector, then this color will be set as the background of the cell (example 2.3).

Example 2.3. Background color

Heading 1	Heading 2
Cell 3	Cell 4

IN in this example we get a blue background color for the cells (tag ) and red at the title (tag ). This is due to the fact that the style for the TH selector is not defined, so the background of the parent is "shown through", in in this case, TABLE selector.

And the color for the TD selector is specified explicitly, so the cells are “filled” with blue.

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

Rice. 2.4. Changing the background color

Margins inside cells

Margin is the distance between the edge of a cell's contents and its border. Typically the cellpadding attribute of a tag is used for this purpose. . It defines the margin value in pixels on all sides of the cell. It is allowed to use style padding property

by adding it to the TD selector, as shown in Example 2.4.

Example 2.4. Fields in tables

Heading 1	Heading 2
Cell 3	Cell 4

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

In this example, by grouping selectors, the fields are set simultaneously for the TD and TH selectors. The result of the example is shown in Fig. 2.5.

Rice. 2.5. Fields in cells

If the padding style property is applied to table cells, then the effect of the cellpadding attribute of the tag

ignored.

Distance between cells

. The effect of this attribute is clearly visible when you use borders around cells or when filling cells with a color that stands out from the background of the page. The style property border-spacing acts as a replacement for cellspacing; it sets the distance between the borders of cells. One value sets both the vertical and horizontal distance between cell borders. If this property has two values, then the first determines the horizontal distance (that is, to the left and right of the cell), and the second determines the vertical distance (above and below).

The border-spacing property only takes effect if the TABLE selector does not have the border-collapse property set to collapse (Example 2.5).

Example 2.5. Distance between cell borders

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Leonardo	5	8
Raphael	4	11
Michelangelo	24	9
Donatello	2	13

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

Rice. 2.6. Table view when using border-spacing

Internet Browser Explorer version 7 and up does not support the border-spacing property, so in this browser the default cellspacing value (usually 2px) will be used for tables.

When adding a border-collapse property with a value of collapse to a TABLE selector, the cellspacing attribute is ignored and the border-spacing value is reset to zero.

Borders and frames

By default, there is no border in the table initially, and its addition occurs using the border attribute of the tag

. Browsers display such a border differently, so it is better not to specify this attribute at all, and leave the drawing of borders to styles. Let's look at two methods directly related to styles.

Using the cellspacing attribute

It is known that the cellspacing attribute of the tag

sets the distance between table cells. If you use different background colors for the table and cells, then a grid of lines will appear between the cells, the color of which matches the color of the table, and the thickness is equal to the value of the cellspacing attribute in pixels. Example 2.3 above shows this effect, so I won’t repeat it.

Note that this is not entirely convenient way creating boundaries because it has a limited scope. This way you can only get a single-color grid, and not vertical or horizontal lines in the right places.

Using the border property

The border style property simultaneously sets the border color, style, and thickness around an element. When you need to create separate lines on different sides, it is better to use the derivatives - border-left , border-right , border-top and border-bottom , these properties respectively define the border on the left, right, top and bottom.

By applying the border property to a TABLE selector, we add a border around the table as a whole, and to a TD or TH selector we add a border around the cells (Example 2.6).

Example 2.6. Adding a Double Frame

Example 2.4. Fields in tables

Heading 1	Heading 2
Cell 3	Cell 4

This example uses a black double border around the table itself and a solid white border around each cell. The result of the example is shown in Fig. 2.7.

Rice. 2.7. Border around table and cells

Please note that double lines are formed where the cells join. They are obtained again due to the action of the cellspacing attribute of the tag

. Although this attribute does not appear anywhere in the example code, the browser uses it by default. If you set , then we get not double, but single lines, but of double thickness. To change this feature, use the border-collapse style property with the value collapse , which is added to the TABLE selector (example 2.7).

Example 2.7. Creating a Single Frame

Example 2.4. Fields in tables

Heading 1	Heading 2
Cell 3	Cell 4

This example creates a solid green line between cells and a black line around the table. All borders within the table have the same thickness. The result of the example is shown in Fig. 2.8.

Rice. 2.8. Border around table

Aligning cell contents

By default, text in a table cell is aligned left. The exception to this rule is the tag , it defines a header that is centered. To change the alignment method, use a style text-align property(example 2.8).

Example 2.8. Align cell contents horizontally

Example 2.4. Fields in tables

Heading 1	Cell 1	Cell 2
Heading 2	Cell 3	Cell 4

In this example, the content of the tag is aligned to the left, and the content of the tag - in the center. The result of the example is shown below (Figure 2.9).

Rice. 2.9. Aligning text in cells

Vertical alignment in a cell is always centered unless otherwise noted. This is not always convenient, especially for tables whose cell contents vary in height. In this case, the alignment is set to the top edge of the cell using the vertical-align property, as shown in Example 2.9.

Example 2.9. Align cell contents vertically

Example 2.4. Fields in tables

Heading 1	Heading 2
Cell 1	Cell 2

This example sets the height of the header like 40 pixels and the text is aligned to the bottom edge. The result of the example is shown in Fig. 2.10.

Rice. 2.10. Aligning text in cells

Empty cells

Browsers display a cell with nothing inside it differently. “Nothing” in this case means that neither a picture nor text was added inside the cell, and the space is not taken into account. Naturally, the appearance of cells differs only if a border is set around them. When using an invisible border, the appearance of the cells, regardless of whether there is anything in them or not, is the same.

Older browsers did not display the background color of empty view cells , so when it was necessary to leave a cell without content but display the background color, a non-separated space () was added inside the cell. Space is not always suitable, especially when you need to set the cell height to 1-2 pixels, which is why single-pixel has become widespread transparent drawing. Indeed, such a picture can be scaled at your discretion, but it is not displayed on the web page in any way.

Fortunately, the era of single-pixel drawings and all sorts of spacers based on them has passed. Browsers work quite correctly with tables even without the presence of cell contents.

To control the appearance of empty cells, use the empty-cells property; when set to hide, the border and background are not displayed in empty cells. If all cells in a row are empty, then the entire row is hidden. The cell is considered empty in the following cases:

• there are no symbols at all;
• the cell contains only a newline, tab, or space;
• visibility is set to hidden .

Addition non-breaking space is perceived as visible content, i.e. the cell will no longer be empty (example 2.10).

Example 2.10. Empty cells

Example 2.4. Fields in tables

Leonardo	5	8
Raphael		11
Michelangelo	24
Donatello		13

Table view in Safari browser shown in Fig. 2.11a. The same table in the IE7 browser is shown in Fig. 2.11b.

A. In browser Safari, Firefox, Opera, IE8, IE9

b. In IE7 browser

Rice. 2.11. View of a table with empty cells

CSS border properties allow you to specify the style and color of an element's border.

Border Style

The border-style property specifies what type of border to display.

None of the border properties will have ANY effect until the property border-style not installed!

Border-style meanings

none: No border

dotted: Dotted border

dashed: Dashed border

solid: Solid border

double: Double border. The width of the double border is equal to the border-width value

groove: Defines a 3D raised border. The effect depends on the border-color value

ridge: Defines a 3D ridge-like boundary. The effect depends on the border-color value

inset: Defines a 3D indented border. The effect depends on the border-color value

outset: Defines a 3D convex border. The effect depends on the border-color value

Border Width

The border-width property is used to set the width of the border.

Width is set in pixels, or using one of three predefined values: thin, medium, or thick.

The "border-width" property does not work when used alone. Use the "border-style" property first to set the borders.

Border Color

The border-color property is used to set the border color. The color can be set using:

• names - specify the name of the color, for example "red"
• RGB - specify an RGB value, for example "rgb(255,0,0)"
• Hex - please specify hexadecimal value, for example "#ff0000"

You can also set the border color to "transparent".

The "border-color" property does not work if used alone. Specify the "border-style" property first to set the borders.

Border - Individual design of sides

In CSS you can specify different borders for different sides:

The example above can be remade using one property:

The border-style property can have from one to four values.

• border-style:dotted solid double dashed;
  • upper border - from points
  • right border - solid
  • lower border - double
  • left border - dotted
• border-style:dotted solid double;
  • upper border - from points
  • lower border - double
• border-style:dotted solid;
  • upper and lower boundaries - from points
  • right and left borders are solid
• border-style:dotted;
  • all four boundaries are made of dots

The border-style property is used in the example above. However, this also works with the border-width and border-color properties.

Border - Shorthand (shorthand) property

As you can see in the examples above, there are quite a few properties for borders.

To shorten the code, you can specify all the properties of the border in one property. This is called the shorthand (or shorthand) property.

The shorthand property for border properties is "border":

When using the border property, the order of values ​​is:

• border-width
• border-style
• border-color

You can skip some values ​​(although the border-style property is still necessary), the main thing is to preserve the specified order.

More examples

All upper border properties in one declaration
This example demonstrates a shorthand property for setting all upper bound properties in a single declaration.

Setting the Bottom Border Style
This example demonstrates how to set the bottom border style.

Setting the width of the left border
This example demonstrates how to set the width of the left border.

Setting the color of the four borders
This example demonstrates how to set the color of four borders. They can have from one to four colors.

Set the right border color
This example demonstrates how to set the color of the right border.

All CSS Border Properties

Property	Description
border	Sets all border properties in one declaration
border-bottom	Sets all bottom border properties in one declaration
border-bottom-color	Sets the color of the bottom border
border-bottom-style	Sets the bottom border style

CSS border element is one or more lines surrounding the element's content and its padding. The frame is set using short property border . The frame style is set using three properties: style, color And width.

Decorating frames and borders of HTML elements using CSS properties

1. Border-style

By default, borders are always drawn on top of the element's background, with the background extending to the outer edge of the element. The frame style determines its display; without this property, frames will not be visible at all. For an element, you can set a border for all sides simultaneously using the border-style property, or for each side separately using the border-top-style qualifying properties, etc. Not inherited.

border-style (border-top-style, border-right-style, border-bottom-style, border-left-style)
Values:
none	The default value means no frame. Also removes the frame of an element from a group of elements with the value of this property set.
hidden	Equivalent to none .
dotted	dotted
dashed	dashed
solid	solid
double	double
groove	groove
ridge	ridge
inset	inset
outset	outset
{1,4}	Listing four different styles for an element's border at once, just for the border-style property: (border-style: solid dotted none dotted;)
initial
inherit

Syntax

P (border-style: solid;) p (border-top-style: solid;)

2. Frame color border-color

The property sets the color of the frames on all sides at the same time. Using the clarifying properties, you can set a different color for the border of each side of the element. If no color is specified for the frame, it will be the same as the color of the element's text. If there is no text in the element, then the border color will be the same as the text color parent element. Not inherited.

border-color (border-top-color, border-right-color, border-bottom-color, border-left-color)
Values:
transparent	Installs transparent color for the frame. At the same time, the width of the frame remains. Can be used to change the border color when hovering the mouse over an element to avoid the element being displaced.
color	The color of the frames is set using the values ​​of the property. (border-color: #cacd58;)
{1,4}	Simultaneously listing four different colors for an element's borders, only for the border-color property: (border-color: #cacd58 #5faf8a #b9cea5 #aab238;)
initial	Sets the property value to the default value.
inherit	Inherits the property value from the parent element.

Syntax

P (border-color: #cacd58;)

3. Border-width

The frame width is specified using length units or keywords. If the border-style property is set to none and the element's border is set to some width, then in this case the border width is set to zero. Not inherited.

Syntax

P (border-width: 2px;)

4. Setting a frame with one property

The border property allows you to combine the following properties: border-width , border-style , border-color , for example:

Div ( width: 100px; height: 100px; border: 2px solid gray; )

In this case, the specified properties will be applied to all borders of the element simultaneously. If any value is not specified, the default value will take its place.

5. Setting a frame for one border of an element

In case it is necessary to set different style boundaries of an element, you can use the shorthand notation for the corresponding boundary.
The properties listed below combine the following properties into a single declaration: border-width , border-style , and border-color . The list of properties is specified in a given order, while one or two values ​​can be skipped, in which case their values ​​will take on the default values.

The style of the top border is set using the border-top property, the bottom - border-bottom , the left - border-left , and the right - border-right .

Syntax

P (border-top: 2px solid grey;)

6. External contour outline

The property specifies an outer border around elements (i.e. outside the normal border). The main purpose of this property is to highlight an element. Unlike the border property, applying this property does not affect the size or position of the element, because the outline is displayed on top of the element block, which in turn can lead to overlap margins element and neighboring areas.

Also, the outer contour, unlike the element’s frame, surrounds the element on all sides, framing it entirely.

The outer outline is always rectangular and does not follow the border of the block for which border-radius is specified.

The outline property allows you to combine the following properties: outline-color , outline-style , outline-width . If any value is not specified, the default value will take its place.

Div ( width: 100px; height: 100px; outline: #cacd58 solid 2px; )

6.1. outline-style

The appearance of the outer contour line is set similarly to the style of the element's frame. Not inherited.

Syntax

P (outline-style: ridge;)

6.2. Outer outline color outline-color

The color of the outer contour can only be specified when set value outline-style. Not inherited.

Syntax

P ( outline-style: ridge; outline-color: silver; )

6.3. Outer outline thickness outline-width

The thickness of the outer contour line is set similarly to the thickness of the element's frame. Not inherited.

Syntax

P ( outline-style: dotted; outline-width: 5px; )