How to Create Borders in HTML (Complete+Image)

One tip to make a website more attractive is to make an outline on the appropriate text such as quotes or so on. By adding a border or commonly called a border, your website will look more attractive and not seem monotonous.

How to Create Borders in HTML

Creating a border in HTML is actually very easy and quite simple. You only need a few properties to make it a border. And the border in HTML has a variety of models that you can use. Immediately, see the explanation below.

1. Creating a Simple Border

This first method is the easiest and simplest way to make a border or it can be said that this is the earliest or basic step in making a border. In making a border, you need a CSS using 3 values, namely: border thickness, border style, and border color. The writing of these three values ​​is separated by a space. The following is a sample script or CSS code for the border.

div {width:200px;height: 50px;}.garis_tepi1 {border: 2px solid red;}

The explanation of the script above is:

• the div tag will make the border 200px wide and 50px high
• div with class line_tepi1 will create a border with a thickness of 2px with a solid style or a solid line and red color.

After writing the CSS script as above, don’t forget to include the script class in the tag section

. The following is an example of a complete complete script.

The following is the result of the script above. Good luck!

2. Creating Borders with Different Styles

Borders in HTML do not only have one style, but there are various border styles that you can use according to your needs and desires. There are 8 types of border styles that can be used, namely: solid, dotted, dashed, double, groove, ridge, inset and output. Then, how to use it? The following is an example of using CSS scripts.

The use of various border styles is actually the same as in the first method, only adjusted to the name of the border style you want. And don’t forget to tag

enter the class name that corresponds to your CSS script. Like the example below.

solid
dotted
dashed
double
groove
ridge
inset
outset

The image below is the display result of the script above. You can see the difference in each style, right? Good luck!

3. Create Borders with Different Colors

Besides you can create borders with various styles, you can also combine several colors on your borders. You can set it according to your wish. The following is an example of a CSS script with a border of various colors.

 div{width: 200px;height: 200px;border-top: 10px solid red;border-bottom: 10px solid yellow;border-left: 10px solid green;border-right: 10px solid blue;}

To make a different color on each border edge you have to use several properties, namely:

• border-top to define the color of the top edge outline.
• border-right to define the color of the right side border.
• border-bottom to define the color of the underside of the outline.
• border-left to define the color of the left side outline.

And don’t forget to adjust the name of the class you are using. For example here, because the CSS script above only uses a div, it means the tag just use tag

just. Like the example below.

The image below is the display result of the script above. Good luck!

4. Creating Borders with Multiple Styles Combine

Besides being able to combine several colors in each line, you can also combine several styles. You can define the style of each line according to your wishes. The following is an example of a CSS script that you can use.

If you want to use a different line style, you must use several properties, namely:

• border-top-style to define the outline of the top side.
• border-right-style to define the outline of the right-hand side.
• border-bottom-style to define the outline of the underside.
• border-left-style to define the outline pattern of the left side.

Also provide the appropriate class name in the CSS script so that CSS can be called and used. Like the example below.

Contoh penggabungan beberapa style dalam border HTML. 

And the image below is the display result of the script above. Good luck!

So this article discusses how to make a border in HTML very easily. Hopefully this article can be helpful and useful for you. Thank you

The rain lover and coffee connoisseur who likes to sit in daydream while dreaming of his dreams that will come true.

Share :