Creating frames using CSS. Frames and borders Comment frame with css corner

To create various beautiful things around it, and the first such beautiful thing will be the frame.

First, let's look at the simplest frameworks. To create them, CSS is used border property, which can be set to the following values:

solid – solid frame;

dashed – dotted frame;

dotted – dotted frame;

double – double line frame;

groove – frame with shadow;

ridge - with relief;

Two more properties needed to create simple frames are

widht – frame thickness;

color – frame color;

According to the abbreviation technique, values ​​are written in one line, separated by spaces.

p(
border : 2px solid #ffff00 ;
}

padding – internal (frame indent from content);

margin — external (margin of the frame from external objects);

Directions are also specified for indentations (from which side and how much to retreat). These properties are used when there is a need to place content off-center in the frame, or the frame itself is offset in some way.

top – top indent;

right – right indentation;

bottom – bottom indent;

left – left indent

The values ​​of these properties are written in an abbreviated version one after another (padding: 10px 30px 15px 20px), and the top value is set first, and then the rest in a clockwise direction.

If you set only one value, this will mean that the indentation on all sides will be the same.

p(
border : 2px solid #ffff00 ;

margin: 20px;
}

If you need to place text or an image in the center of the frame, then you can add to the “p” selector text-align property: center ;

Next, let's look at how the height and frame width. The height of the frame is set automatically by the browser, and is selected in such a way that the content fits in it, taking into account the specified indents. But we will set the width ourselves.

It is set by the width property, and its value indicates the desired size in pixels, or other length measures accepted on the web.

p(
border : 2px solid #ffff00 ;
padding: 10px 20px 10px 20px;
margin: 20px;
width: 400px;
}

By the way, remember that when you set the width, the browser understands this value as the width of the content only. It then adds the specified padding and border thickness to this value, and displays the final size on the page.

The last thing to do is position the frame on the page. This is done using the already existing margin property.

And if you just need to position the frame block in the center of the page, then the value auto is added to the margin property.

p(
border : 2px solid #ffff00 ;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}

For the first example, let's create html document, and create solid frames for the body block (the body of the document), and one paragraph.

In the following examples, only the CSS (what is enclosed in the style tag) will change.

Hello dear future webmasters!
I am 55 years old and I am glad to welcome you to my website.

Result:

The next frame is dashed.

p(
text-indent : 30px ;
border : 2px dashed #ff4f00 ;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}

Result:

Frame dotted:

p(
text-indent : 30px ;
border : 3px dotted #ff4f00 ;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}

Frame double:

p(
text-indent : 30px ;
border : 5px double #ff4f00 ;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}

Frame groove :

p(
text-indent : 30px ;
border : 7px groove #ff4f00 ;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}

Frame ridge:

p(
text-indent : 30px ;
border : 10px ridge #ff4f00 ;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}

To do this, remove the border and add border-radius and box-shadow .

p(
border-radius: 10px;
box-shadow : 0 0 0 3px #ff4f00 ;
text-indent : 30px ;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}

Let's blur the outer edge of the frame. To do this, in the box-shadow property, increase the third digit.

p(
border-radius: 10px;
box-shadow : 0 0 7px 3px #ff4f00 ;
text-indent : 30px ;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}

Let's make a multi-colored frame. To do this, add several more sets of values ​​with different colors to the box-shadow property, separated by commas.

p(
border-radius: 10px;

0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
text-indent : 30px ;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}

You can make a circle in a frame. To do this, set the paragraph the same height and width, that is, make a square, change the value of border-radius

p(
border-radius : 50%/50% ;
box-shadow : 0 0 0 3px #ff4f00 ,
0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
padding: 40px;
margin: 20px auto;
width: 130px;
height: 130px;
text-align: center;
}

If you play with the fractional border-radius value, you can make any kind of ellipse.

The first number in the fraction is the bend of the vertical component of the angle, the second is the horizontal.

And the last thing we'll do today is a frame with a changing color. It will change when you hover the cursor.

This option is implemented using the :hover pseudo-class.

p(
border-radius: 10px;
box-shadow : 0 0 0 4px #ff4f00 ;
text-indent : 30px ;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}
p:hover (
border-radius: 10px;
box-shadow : 0 0 0 4px #00ff62 ;
text-indent : 30px ;
padding: 10px 20px 10px 20px;
margin: 20px auto;
width: 400px;
}

In a calm state:

On hover:

The same method can be applied to a multi-colored frame, and change one color when you hover the cursor.

I wish you creative success.

Turn

Two Irishmen are fighting on the streets of Dublin. Another one comes up to them, takes off his hat and asks:
- Excuse me, is this a private fight or can anyone intervene?..

1. , , - CSS properties
2. (Transparent) - CSS property. Responsible for creating a diagonal frame
3. "px" - value in pixels

In this article we will talk to you about creating frames, but not ordinary square ones, but rounded ones. They have more beautiful view than ordinary square frames without rounding.

Property expanding the space for creative ideas increasing the number possible elements design. And in combination with changing the styling of the frames, using property values , you can create a special frame that you won't find anywhere else.

In this article we will take a closer look at creating round frames and more. There is such a thing in CSS as triangular frames, but more on that below.

Rounding frames using

This CSS property allows you to round the borders of an element. Some developers use it, without creating visible borders, to create layouts on a rounded "body" container.

Using standard radii, you can create rounded shapes, such as a circle or an oval.

In order to track the operation of this property, it is enough to set the property . Although its name contains the word "border", it does not directly relate to creating frames. It rounds the borders of the web element rather than its border.

The property itself is a shorthand for four properties: , , And . Each of them specifies the radius of curvature for each of the four corners.

Simple property can use either one or 4 values. Works the same as with the property or .

Rounding can be applied to all HTML elements, but not in all cases. Some browsers do not accept it when loading frames that have the property , with the value "collapse".

You can use different values ​​to determine the curvature radius, but most often the value is specified in pixels. This is because they are best suited for detailing small sized features.

In addition to the usual rounding, you can use an additional radius, for example, to create an ellipse.

To do this, you need to divide the values ​​by a fraction.

Property - examples:

Now we'll show a couple of examples of creating a rounded border. To study them in more detail, download our sources.

Creating triangles using

To create triangles you need to use the property . But here its use will be slightly different from creating regular frames.

First, set the triangle element's width and height to zero.

After that, write down a few properties. The first is the main thing, the property of the frame. It is created almost the same as usual. Set the width, line type and enter the value "transparent". It is responsible for creating a triangle.

In order to create a straight side of the triangle, you need to create a separate frame line for this side.

Conclusion

Now you know everything about the property , which will allow you to create unique design elements. Additionally, the triangles created with "border" make great decorative pieces that can be placed on any web page.

It may seem very difficult at first, but if you practice, it will be easier than you think. Download our sources and study their code to better understand how the property works. We wish you good luck in your studies!

The CSS border property is used to create the border of an object, namely the thickness of the border, its color and style. This property is widely used in HTML. You can create various effects to better perceive 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 the standard values ​​thin, medium, thick (they differ only in width in pixels)
• 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 is applied parent element
• border-color - border color. Can be set using specific name colors or in RGB format (see names of html colors for the site)

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 set in the form RGBA (R, G, B, P), where the last parameter sets the transparency ( 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 Syntax border-width

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 - setting 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 in a line than to create 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 CSS property border-radius (only available in CSS3). It can be used to create rounded corners, which creates a completely different look. For example

7. CSS Indented Line

Depressed lines can look impressive against a 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"

As an example, you can take one variation, where the block has curved corners, and it looks completely different from the standard one. Some have an option for placing various ribbons or installing an image that is installed inside the block.

All material presented is in adaptive form for different resolutions, whether for a large monitor or the smallest screen. After installation, a change will occur on the site, where they are mainly placed to attract attention, because initially there is only a structure that can complement the main style.

First option:

Ugoinsa_utomatio_npones (
display: inline-block;
width: 295px;
position: relative;
border: 1.5px solid #1b629e;
transition: all .3s ease;
margin: 5px;
cursor:pointer;
}
.ugoinsa_utomatio_npones:before, .ugoinsa_utomatio_npones:after (
content: "";
z-index: -1;
display: block;
position: absolute;
background: #FFF;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-iteration-count: 1;
transform-origin: 50% 50%;
}
.ugoinsa_utomatio_npones:before (
width: calc(100% + 4px);
height: 75%;
z-index: 1;
transition: height 0.6s;
}
.ugoinsa_utomatio_npones:after (
height: calc(100% + 4px);
width: 85%;
z-index: 1;
transition: width 0.7s;
}
.ugoinsa_utomatio_npones:hover:before, .ugoinsa_utomatio_npones:focus:before (
height: 50%;
}
.ugoinsa_utomatio_npones:hover:after, .ugoinsa_utomatio_npones:focus:after (
width: 74%;
}
.sequpok_egulaned_demob (
padding: 29px;
z-index: 2;
position: relative;
text-align: center;
}

Second option:

Pvobamoco-mpagensive (
position: relative;
display: inline-block;
width: 283px;
margin: 7px 0 37px 0;
padding: 28px;
color: #f3eaea;
text-align: center;
background: #2b22a0;
background: linear-gradient(to left bottom, transparent 50%, rgba(16, 16, 16, 0.4) 0) no-repeat 100% 0 / 30px 30px, linear-gradient(-135deg, rgba(0, 0, 0 , 0) 20px, #334ab9 0);
filter: drop-shadow(18px 28px rgba(14, 14, 14, 0.1));
}
.pvobamoco-mpagensive::before (
content: " ";
position: absolute;
top: 30px;
right: 0;
background: linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(14, 14, 14, 0.1) 0) 100% 0 no-repeat;
width: 28px;
height: 28px;
transform: rotate(180deg);
}

Third option:

Keculosubes_aspectsiveb (
position: relative;
display: inline-block;
width: 295px;
padding: 30px;
margin: 9px;
min-height: 91px;
border: 2px solid #BFE2FF;
text-align: center;
}
.malugeke_deculos (
width: 148px;
height: 148px;
overflow: hidden;
position: absolute;
}
.malugeke_deculos::before, .malugeke_deculos::after (
position: absolute;
z-index: -1;
content: "";
display: block;
border: 5px solid #2980b9;
}
.malugeke_deculos span (
position: absolute;
display: block;
width: 223px;
padding: 15px 0;
background-color: #337AB7;
box-shadow: 0 5px 10px rgba(12, 12, 12, 0.1);
color: #f3f0f0;
font: 700 18px/1 "Lato", sans-serif;
text-shadow: 0 1px 1px rgba(8, 8, 8, 0.1);
text-transform: uppercase;
text-align: center;
}
.malugeke_deculos-top-left (
top: -10px;
left: -10px;
}
.malugeke_deculos-top-left::before, .malugeke_deculos-top-left::after (
border-left-color: transparent;
}
.malugeke_deculos-top-left::before (
top: 0;
right: 0;
}
.malugeke_deculos-top-left::after (
left: 0;
bottom: 0;
}
.malugeke_deculos-top-left span (
right: -25px;
top: 30px;
transform: rotate(-45deg);
}
.malugeke_deculos-top-right (
top: -10px;
right: -10px;
}
.malugeke_deculos-top-right::before, .malugeke_deculos-top-right::after (
border-top-color: transparent;
border-right-color: transparent;
}
.malugeke_deculos-top-right::before (
top: 0;
left: 0;
}
.malugeke_deculos-top-right::after (
right: 0;
bottom: 0;
}
.malugeke_deculos-top-right span (
left: -25px;
top: 30px;
transform: rotate(45deg);
}

Here a web developer can design it beautifully, because for this there is already a complete frame, some people put shadows, it all depends on the color palette of the Internet resource and in general where you will be and for what purpose you will place such an original frame.

In this tutorial we will create the effect of curled corners without using images or additional markings. It works great in all modern browsers and is well suited for website designs with simple color schemes.

This effect was used in the demo for the lesson "Multiple backgrounds and strokes using CSS2". In addition, the use of curled corners in the design of a real website can be seen in the example of Yiibu. But the Yiibu site uses images, and we use pseudo-elements and CSS.

Start

Nothing complicated. Any element will do and no additional marking will be required. It all starts with a simple painted rectangle. Browsers that don't support pseudo-elements (IE6 and IE7) will output it too.

Adding the position:relative property makes absolute positioning of pseudo-elements possible.

Note ( position:relative; width:30%; padding:1em 1.5em; margin:2em auto; color:#fff; background:#97C02F; )

A folded corner is created using a pseudo-element that is positioned in top corner rectangle. The pseudo element has no width or height, but it has a thick stroke. By changing the thickness of the stroke, we will change the size of the folded corner.

In this example, the top and right parts of the stroke have colors that match the background color of the parent rectangle. The left and bottom parts of the stroke are a darker or lighter color than the background color of the rectangle.

Note:before ( content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#658E15 #fff; )

That's all you need to create a simple dog-ear effect similar to the one used on the Yiibu site.

Firefox 3.0 does not allow pseudo-elements to be positioned. You can use a couple of properties to fix this in this browser.

Note:before ( ... display:block; width:0; )

Adding a light shadow

The appearance of the corner can be slightly improved by adding a box-shadow property (for those browsers that support it) to the pseudo-element. Setting the overflow:hidden property on the element class hides part of the shadow, which breaks the curl effect.

Note:before ( ... -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); )

Rounded corners

It's also relatively easy to use this technique in conjunction with rounded corners. Unfortunately, every modern browser has some kind of bug related to the border-radius property (including those that use the property without a prefix). This situation means the need for additional work.

Only Webkit browsers can do rounded corners for pseudo-elements if they only have 2 stroke parts. Opera 11 and Firefox 3.6 create an eye-watering mess. Moreover, Opera 11 has the maximum error in this process.

Using all four sides eliminates problems in Opera 11 and Firefox 3.6. But this method solution results in an error in Safari 5 that results in a jagged diagonal line. Bypass this problem You can set the color for at least one part of the stroke to transparent .

The background color will be visible through the transparent outline. Ideally, this approach will generate an effect and contain a minimum of code. But Opera 11 shows background color through a transparent stroke only if the border-radius property is set.

Note-rounded:before ( content:""; position:absolute; top:0; right:0; border-width:8px; border-color:#fff #fff transparent transparent; background:#658E15; -webkit-border- bottom-left-radius:5px; -moz-border-radius:0 0 0 5px; border-radius:0 0 0 5px; display:block; width:0; )

The CSS file for the demo page contains comments that are useful for working with. Each browser has its own quirks when using the border-radius property or bordering elements without a width or height.

Final code

Below is all the CSS code needed to create a curled corner effect with subtle shadows using just one HTML element.

Position:relative; width:30%; padding:1em 1.5em; margin:2em auto; color:#fff; background:#97C02F; overflow:hidden; ) .note:before ( content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#fff #fff #658E15 #658E15 ; background:#658E15; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); display:block; width:0; /* Overcoming Firefox 3.0 limitations */ ) .note.rounded ( -webkit-border-radius:5px; -moz-border-radius:5px ; border-radius:5px; ) .note.rounded:before ( border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border- radius:0 0 0 5px; border-radius:0 0 0 5px; )

Conclusion

The demo page contains examples using different colors to make sure the effect is easy to use.

Keep in mind that this technique works less well when using an image as a background for an element than when using a simple color. But other methods of organizing bent corners also have such limitations.