Frames placed around pictures or text decorate the site and add variety to its design. If you use tables to create borders, then the code for each border will take up too much space. Also, in this case, you will have to rewrite the HTML code for each frame. With CSS, you can easily make a border of any thickness and color you want by writing simple code once for all the elements that will be surrounded by this border. This technology will allow, if necessary, to change the type of frames on the site in a couple of minutes.
It is necessary
- - have your own website;
- - know what CSS is and where these styles are written on the site.
Instructions
Step 1
To create a border, first write the following code in CSS:
ramka {}
Step 2
To make the border the size you want, use the border-width parameter, which sets the line width in pixels. For example, if the frame line should be 3 pixels wide, then the entry will look like this:
ramka {border-width: 3px;}
Step 3
Now define the style of the border using the border-style parameter. If you want to create a border whose sides are regular solid lines, then put the following entry in the code between the curly braces - border-style: solid.
Step 4
A dotted border can be obtained by writing it like this: border-style: dotted. Checking border-style: dashed will give you a dashed border.
Step 5
You can make the border a double solid line like this: border-style: double. Use border-style: groove or border-style: ridge to frame text or images into frames with 3D side effects. The difference between these two options is that in the first case, the frame consists of depressed lines, and in the second, convex ones.
Step 6
Use this code: border-style: inset to create the effect of an inset with the border of a site element. To make the content of the border, along with the border, on the contrary, convex, write border-style: outset.
Step 7
You can add the desired color to the frame using the border-color parameter, also placed between the curly braces. If you want to make the border red, then write border-color: red, blue - border-color: blue, orange - border-color: orange.
Step 8
The CSS border code, including all the options, looks like this:
ramka {border-width: 3px; border-style: solid; border-color: blue;}
Step 9
Now, in HTML, write this:
Frame content Instead of the phrase "Frame content", insert the text or code of the desired picture.
Step 10
Thus, you can design an unlimited number of elements on the site. To change the appearance of the frame, you only need to make changes to the CSS code.
