Css double border. Examples with different CSS borders

Vlad Merzhevich

WITH using CSS You can add a border to an element in several ways. Basically, of course, the border property is used, as the most universal one, as well as outline and, surprisingly, box-shadow , the main task of which is to create a shadow. Next, we will consider these methods and their differences among themselves.

outline property

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

• outline is displayed around the element (border inside);
• outline does not affect the dimensions of the element (border is added to the width and height of the element);
• outline can only be set around the entire element, but not on individual sides (border can be used for any side or all at once);
• outline is not affected by the fillet radius specified by the border-radius property (border is affected).

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 many situations, but they do occur:

• creating complex multi-colored frames;
• adding a frame to an element when you hover the mouse over it;
• hiding the border that the browser automatically adds to some elements when receiving focus;
• for outline, you can set the distance from the edge of the element to the frame using the outline-offset property, to create .

Multi-colored frames

You need to understand that outline in no way replaces border and can easily exist together with it, as shown in example 1.

Example 1: Creating a Frame

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

Rice. 1. Frame around the element

Frame when using:hover

When adding a frame via border, the width of the element increases, which is quite noticeable when combining border and the :hover pseudo-class. There are two ways to “win” this. The simplest thing is to replace border with outline , which, as we know, does not affect the size of the element (example 2).

Example 2: Frame on Hover

outline is not always suitable, if only because rounding corners does not affect it. The second method is suitable here - add an invisible frame or a frame that matches the background color, and then change its parameters when hovering (example 3). Then no displacement of the element will occur, since the frame initially already exists. But we 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 situation is similar with height.

Example 3: Frame on Hover

Border around form fields

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

Rice. 2. Frame around the margins

Example 4. Removing 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 that cannot be created using border or outline . This is all thanks 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 in this case is responsible for the thickness of the border, and the fifth sets the color of the border. 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 frames 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

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 you could create a shape like this using CSS:

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 multiple values ​​for one 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, 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 is 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
• border-right (right border)
• 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;

This property creates a border around an element. You can read more about this property at the link, and in this article I general outline I'll describe how it works. This information will be enough to understand how to make frames using CSS.

The syntax for the border property is simple: border: 1px solid black; . This property has three meanings:

• 1px - border thickness.
• solid - frame type, solid is a solid line, double is a double solid line, dashed is a dotted line. There are several other types of borders, information about them can be found here: CSS border.
• black - sets the border color. Colors can be specified by name, valid values are here: CSS color table, or by hexadecimal code. How to do this is described in the article: colors in CSS.

CSS text frame

Here's an example of using the border property to create a border that is one pixel wide and black:

This paragraph is assigned the class example-1.

In this example we also used CSS property padding, or internal padding. This property specifies the amount of indentation from the text to the stroke (the border of the element).

Let's look at another simple example, just to get the point across. Let's create a frame three pixels wide, red, and without any internal padding (property CSS padding).

This paragraph is assigned the class example-2.

As we can see, without the padding, the text frame looks horned.

How to make a picture frame in CSS

Frames for pictures are set similarly using the border property. Let's make a frame Green colour 4 pixels thick for the image.

Example-img ( border: 4px solid green; )

Here's how this code will work:

How to round the corners of a frame in CSS

Rounding the corners of a border in CSS is done using the border-radius property. This property was introduced in CSS3 and works in all modern browsers.

The border-radius property can have from one to four values. If there is one value, then it sets the degree of rounding for all corners. Let's give an example of how this property will work with one value.

Example-3 ( border: 1px solid black; border-radius: 15px; padding: 10px; )

Here's how it works:

border-radius property: 15px.>

If the block does not have a border, then there is a border-width: 0; , then the area filled with the background color will be rounded (background-color property). Here's an example:

Example-4 ( border-width: 0; // although this value is 0 by default background-color: #DDD; border-radius: 15px; padding: 10px; )

Here's how this example works:

border-radius property: 15px.>

As I wrote earlier, the border-radius property can be set from one to four values. The table below describes how each combination of values ​​will work.

For the border-radius property, values ​​can be specified as percentages.

Let's draw a circle in CSS. To do this, take a square block of 100 by 100 pixels and round it CSS corners border-radius: 50% rule.

Example-5 ( width: 100px; height: 100px; background-color: #F00; border-radius: 50%; )

Here's how this example works:

This covers the topic of “frames in CSS” completely. Good luck learning CSS!

In this chapter:

The block model is a way of displaying elements by browsers that process all tags as small blocks, for them any tag is a container with content: text, images, other tags, etc.

• Margin(margin) - empty space (margin) that separates one element from another. The simplest example of indentation is the space between paragraphs that follow each other. The margin area is transparent and cannot have its own color or other design effects.
• Border(element border) - border on any side of the element. The frame can be installed both on all sides of the element and on one side. Using a frame, you can simply decorate an element beautifully or visually separate the contents of the current element from other elements on the page.
• Padding(padding) - empty space between the content of an element and its border. The padding area is transparent and cannot have its own color or other design effects.
• Most elements have a content area that contains everything content element (text, inserted images or other elements).

Frame

The frame represents regular line, which is displayed around the element being styled. But it is not at all necessary to use a frame surrounding the element on all sides. You can add it only from the required side of the element. For example, if you add a border only to the bottom side of a block element, it will produce the same effect as the element

---

(horizontal line), acting as a separator.

Each frame has three properties that we can control using CSS: width, style and color. Let’s look at which properties can be used to set and change them:

Instead of specifying all three properties, you can specify just one - the border property, which allows you to simultaneously specify the width, style and color for the border:

First paragraph.

Second paragraph.

Third paragraph.

To control the frame separately on each side of the element, use the following properties:

• border-top - top frame
• border-left - left frame
• border-right - right frame
• border-bottom - bottom frame

These properties work exactly the same as the border property, except that they only allow you to control the border on one side of the element you're styling.

Outer and inner margins

Indentation- empty space between the content of the element and its border (if it is installed). To add and control the width of padding on all four sides of an element, use the padding property.

Margin is the empty space that separates an element from other elements or the edges of the browser window. To add and control the width of margins on all four sides of an element, use the margin property.

The padding and margin properties can take from one to four values:

Where the values ​​are set clockwise, starting from the top:

If you specify only one value for properties, then the indents on all sides will be the same width.

At first glance, the visible effect when using these properties looks the same; to notice a visual difference between them, you can, for example, set a border for an element or set the background:

Regular paragraph.

For indents, as well as for frames, there are properties that allow you to control the size of the indent on each side separately. Padding controlled by the properties: padding-top , padding-right , padding-bottom and padding-left . Margins are controlled by the following properties: margin-top , margin-right , margin-bottom and margin-left .

Note: values padding properties and margin are not inherited child elements, so you need to specify the padding width separately for each element that needs it.

Element width and height

Default for block elements autowidth is used. This means that the element will be stretched exactly as much as there is free space. The default height of block elements is set automatically, i.e. The browser stretches the content area vertically so that all content is displayed. To set custom dimensions for an element's content area, you can use the width and height properties.

Property CSS border It works to create the border of an object, namely the thickness of the frame, its color and style. This property is widely used in HTML. You can create various effects for better perception of the content on the page. For example, design a sidebar, website header, menu, etc.

1. CSS border syntax

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

• border-width - border thickness. You can set it in pixels (px) or use standard values thin, medium, thick (they differ only in pixel width)
• border-style - style of the displayed border. Can take the following values
  • none or hidden - cancels the border
  • dotted - dotted frame
  • dashed - frame made of dashes
  • solid - simple line (most often used)
  • double - double frame
  • groove - grooved 3D border
  • ridge, inset, outset - various 3D frame effects
  • inherit - the value of the parent element is applied
• border-color - border color. Can be set using specific name colors or in RGB format(see names of html colors for the site)

Note

The values ​​in the CSS border property can be set in any order. The most commonly used sequence is “thickness style color”.

2. Examples with different CSS borders

2.1. Example. Different border design styles border-style

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style:outset

Four different frames

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style:outset

Four different frames

2.2. Example. Change frame color on mouse hover

This example is very simple but interesting. It shows how the :hover pseudo-class and the CSS border can be used to create simple effects (such as menus).

When you hover your mouse over a block, the frame color will change

This is what it looks like on the page:

2.3. Example. How to make a transparent border frame

The frame can be made transparent. This effect is rare, but can sometimes be very useful for web designers. To set transparency, you need to use the color setting in the form RGBA (R, G, B, P), where last parameter transparency is set (real number from 0.0 to 1.0)

This is what it looks like on the page:

3. Border thickness: border-width property

Sets the line thickness. Previously, we specified it in a single description of border.

CSS border-width syntax

border-width: thin | medium | thick | meaning;

• thin - thin line thickness
• medium - average line thickness
• thick - thick line thickness

Below are some examples. The most unusual thing will be the different thickness of the border on each side.

border-width: thin

border-width: medium

border-width: thick

Different thickness at the borders

This is what it looks like on the page:

border-width: thin

border-width: medium

border-width: thick

Different thickness at the borders

4. How to make a border frame on only one edge (border)

The CSS border property has derived properties for setting one-sided borders on an element:

• border-top - to set the border at the top (top border)
• border-bottom - to set a border at the bottom (bottom border)
• border-right - to set the border on the right (right border)
• border-left - to set the border on the left (left border)

These boundaries can be combined, i.e. Write your own frame for each direction. The syntax is exactly the same as border.

There are also properties

• border-top-color - set the color of the top border
• border-top-style - setting the style of the top border
• border-top-width - setting the thickness of the top border
• etc. for each direction

In my opinion, it’s easier to write everything on a line than to produce extra text in styles. For example, the following properties will be the same

/* Description of two identical styles: */

4.1. Example. Beautiful frame for highlighting quotes

Quote frame example

This is what it looks like on the page:

Quote frame example

Note
You can set a separate border for each side.

5. How to add multiple borders to an html element

Sometimes you need to make several borders. Let's give an example

5.1. First option with multiple borders

This is what it looks like on the page:

There is a second way through shadowing.

5.2. Overlay shadows to create multiple borders

This is what it looks like on the page:

6. Rounding corners at borders (border-radius)

For creating beautiful frames use the CSS border-radius property (only available in CSS3). It can be used to create rounded corners, which creates a completely different look. For example

7. CSS Indented Line

Pressed lines can look impressive on dark background, which is not suitable for every site.

---

This is what it looks like on the page:

To access border from JavaScript, you need to write the following construction:

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