Property css – « border”, allows you to set the thickness, color and type of the line around the perimeter around the element. The parameters of this 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 set either in RGB format(Red Green Blue), 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

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.

Result this example in 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

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

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.

Michael 2016-06-11 1 HTML and CSS 0

How to make a double border in css?

Hi all. Do you know how to make a double border in css? If not, then please read this short note. The point is that you can't do this with a regular border , you have to go the other way.

If you set a border with the border property, you can only set one. But very often, the design may require several frames. In this case, you should use a pseudo-frame - a shadow.

Double border with box-shadow

In general, if you want to study the shadow in css in more detail, then I advise you to read on the relevant topic. In this article, I will not explain the property syntax in detail, but will simply show you how to create a double border. So, I will create an ordinary block, to which I will prescribe some styles. The block can be any and with any content. In my case, this is a simple div, so I won't even show the html code. And here are the styles:

Div(
background: #E0D8A3;
width: 180px
height: 110px;
padding: 12px
}

Well, a typical example of block design.
Now let's create a double border using multiple shadows. I will add the following property to the block styles:

Box-shadow: 0 0 0 1px #000, 0 0 0 10px #E0D8A3;

This is how it looks like:

As you can see, it turned out pretty nice. There are only 5 parameters in box-shadow. The first is the horizontal offset of the shadow, the second is the vertical offset. The third and fourth parameters are blur and stretch. As you can see, we do not touch the first three at all. We don't need a blur, because we need a sharp shadow. As you can see, I prescribed the fourth parameter - stretching. It determines how much the shadow will be larger than the element it is attached to.

By default, everything looks like this - the shadow is the same size as the element and lies clearly under it. If you change the stretch, then the shadow starts to protrude beyond the element. This is how you can create borders, exactly the same as the border property. Well, with the fifth parameter, I think everything is clear - this is the color of the shadow.

As you can see, I simply listed the parameters for each new shadow, separated by commas. I think you already guessed that in the same way you can create a triple border, etc. There are no restrictions here. Actually, as for me, the issue is closed, and if you have any questions, you can write them in the comments.

A minute of your attention: We all want to place our sites on a reliable hosting. I have analyzed hundreds of hosts and found the best one - HostIQ There are hundreds of positive reviews about it in the network, the average user rating is 4.8 out of 5. Let your sites be good.

Description

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

Syntax

Values

The border-width value determines the width of the border. Several border-style values ​​are provided to control its appearance. Their names and the result of the action are shown in Fig. one.

Fig.1. Frame styles

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

inherit inherits the parent's value.

HTML5 CSS2.1 IE Cr Op Sa Fx

In this example, a double border is added around the layer. The result is shown in fig. 2.

Rice. 2. Applying the border property

Object Model

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

Browsers

Internet Explorer up to and including version 6 renders dotted as dashed with a border width of 1px. At 2px and above, the dotted value works correctly. This bug has been fixed in IE7, but only for all 1px borders. If one of the box's borders is 2px or thicker, then dotted becomes dashed in IE7.

Internet Explorer up to version 7.0 does not support the inherit value.

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

Description

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

Syntax

Values

The border-width value determines the width of the border. Several border-style values ​​are provided to control its appearance. Their names and the result of the action are shown in Fig. one.

Fig.1. Frame styles

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

inherit inherits the parent's value.

HTML5 CSS2.1 IE Cr Op Sa Fx

In this example, a double border is added around the layer. The result is shown in fig. 2.

Rice. 2. Applying the border property

Object Model

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

Browsers

Internet Explorer up to and including version 6 renders dotted as dashed with a border width of 1px. At 2px and above, the dotted value works correctly. This bug has been fixed in IE7, but only for all 1px borders. If one of the box's borders is 2px or thicker, then dotted becomes dashed in IE7.

Internet Explorer up to version 7.0 does not support the inherit value.

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

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.

Consider using CSS to 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 keyword values ​​for the border-width property. 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 and HSLA formats for CSS3.
• The name of the color, for example black (black). For a complete list of color names, see the CSS Color Names table.

The border-color property can also have one to four values ​​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 for 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.

By carefully studying this table, you can understand that the shortest entry for the desired style will be: 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;