Borders in CSS

Four ( border: solid 6px #888; background: #fff; width: 312px; min-height: 312px; ) .four div ( width: 300px; min-height: 300px; background: #222; margin: 6px auto; overflow : hidden)

The outer element has a little larger size, which creates the illusion of a double frame.

Method 5: border-image property

Another new technique is the often forgotten CSS3 border-image property:

Five ( border-width: 12px; -webkit-border-image: url(multiple-borders.gif) 12 12 12 12 repeat; -moz-border-image: url(multiple-borders.gif) 12 12 12 12 repeat; border-image: url(multiple-borders) 12 12 12 12 repeat; /* for Opera */ )

Do you know another method?

Of course, long-known and widely used methods are collected here. But maybe you know a trick. Share with readers in the comments.

In the process of designing a website, many novice website builders wonder how to change the font, size and color of headings. Yes, this is really a great option with which you can add some freshness to your website design. But there is another equally intriguing question: how to make an html frame.

What is the html frame for?

Actually, no special function this element does not carry. But still, the text, enclosed in an attractively designed frame, arouses a certain interest among readers. Therefore, a frame around the text can safely be called one of the ways to emphasize the importance of the framed text.

Features of creating a frame around text

Of course, variations in frame design using CSS much more, but that's a completely different story. In addition, this method is suitable for more advanced site builders. I think you and I and with the help of editing html code you will get an equally beautiful html frame.

At the first stage, you need to understand that a frame can be made for everyone html element regardless of what kind of tag it is

,

, , etc.

In turn, there is a difference between the frames of inline and block elements.

The frame of the built-in type is located inside the tags, or more correctly, the person responsible for it html display code enclosed between certain tags. As a result, we get an html frame around the text, for which we need to write certain commands to set internal margins.

Block frames are formed across the entire width of the block, which provokes the need to specify commands related to limiting the width.

Of course, in order to make text in an html frame, we will have to turn to the built-in styles. This method will be most suitable for highlighting some individual phrases, paragraphs in text and pictures. If you need to highlight a specific part of the template that is displayed on all pages of the site, it is reasonable to edit the style.css file of the template.

How to make a frame around text in html

I think there is plenty of theory. It's time to practice. As an example, I will enclose in a bright light green frame with gray background one of the important proposals of this article.

Important point! Built-in styles work perfectly and do not harm the HTML validity of the site.

To implement the same frame, you need to refer to the tag

YOUR SUGGESTION.

Since in in this example built-in css styles, I consider it equally important to introduce you to each of them.

1. border– property responsible for displaying the frame. To simplify the task, I did not specify each property separately - border-width (thickness of the frame borders), border-color (html frame color). Instead, I shortened the html code a little by writing all the properties after the colon.

To change the appearance of the frame, just change the value solid. The following frame boundaries exist:

Ridge – relief.

Dotted - dotted.

Double - double.

Dashed - dotted.

Solid - solid.

2. padding– a property responsible for the distance between the frame and the object enclosed in it.

If you wish, you can play around with styles a little more by adding to the number of commands enclosed between the opening and closing tags

Property margin. In this way, you can indent elements that are outside the frame.

in order to change the background It is enough to register the background-color property, specifying the code of the desired color after the colon.

Frame around html pictures It's done in the same way, so you shouldn't have any problems with it. The only thing a beginner needs to know is that in order to display it, properties must be written in a single tag .

To summarize, we can say that in order to make a frame around a picture or text, it is enough to open the display of the html code of the article and write special properties in it between certain tags.

Thank you for your attention and see you soon on the pages of Stimylrosta.

Found in the text grammatical error? Please report this to the administrator: select the text and press the hotkey combination Ctrl+Enter

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 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 of the parent element is applied
• border-color - border color. Can be set using specific name colors or 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 you can use the :hover pseudo-class and the CSS border to create simple effects(for example, for a menu).

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 asked it in unified description 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 line)
• 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 property CSS 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

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"

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

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

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

border-width

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

You can set the width either using the usual pixels, percentages and other CSS length units, or using reserved words thin(2px), medium(4px) and thick(6px).

Border-width: 16px 12px 4px 8px;

border-style

Defines the border style. Note that if you do not set this rule but specify the property border-width, then there will be no frames at all, so if you want visible borders, be sure to specify border-style.

A property can have quite a lot of values, all of them are clearly demonstrated in the figure below.

The last paragraph shows that the style, like the thickness, of the frame on each side can be its own:

border-style: solid double dotted none

border-color

Works the same as the previous properties, but is responsible for the color of the borders. You can also set it from one to four values, and you already know the result. If the rule is not set, the frames will have the text color of the current element or, if this is not specified, the text color of the parent element.

Border-color: #C85EFA;

border

Makes it easier to write and saves code by allowing you to set all of the listed properties for borders on all sides of an element in one line:

P ( border: 2px solid green; )

For settings different rules frames with different sides the following values ​​can be used:

• border-top- upper limit.
• border-right- right.
• border-bottom- lower.
• border-left- left.

P ( border-left: 6px dotted yellow; )

outline-width

Same as border-width, only for external, not inner frame. Sets the thickness of the outline in the same values ​​as border-width. In addition to the thickness of the element's frame, you need to specify its style, otherwise there will be no outline.

outline-style

Property values ​​duplicate values border-style. The rule specifies the style of the outer contour.