How to Install Operating System ??Complete Guide Installing The Operating System

How To Set Lines With CSS

Tutorial this time we will discuss how to set lines with CSS, the command to create lines on CSS is to use borders to set boundaries on components, the border has many syntaxes separated so that each corner of each edge on the component can determine for itself how the style will be applied to each edge.

Before going forward, there are a number of articles that you might be looking for.

READ TOO :

How to make lines with CSS

To make a line with the first CSS is to determine which elements will be used to create a line with this border command. The following is a complete code example making a line with CSS.

border: 1px solid # 000000;

The above command is used to create a black border with a line size of 1 pixel and a solid line type, in fact, the above command can be separated into several parts on CSS, this might be done when to determine the line dynamically arranged.

border-width: 1px;
border-style: solid;
border-color: #000000;

The code above results the same as the first, with the syntax separator above can be used to dynamically define lines.

How To Set Lines With CSS

How do I set the line with CSS? for example on each edge of the element has a different line style, of course in CSS this can be done, because the border syntax is separated into a number of commands to adjust the line to suit your wishes. The following is an explanation of each property that can be used to set the line with CSS.

Border-color Property On CSS

In addition to specifying the color of the line with the border-color property, CSS is able to adjust the edges with various corners of the property for the border on the element, here is an example.

<style type = "text/css">
    .border {
        border-width: 1px;
        border-style: solid;
        border-top-color: red;
        border-bottom-color: blue;
        border-left-color: green;
        border-right-color: yellow;
    }
</style>

<div class = "border">
     Determines the color of the edge of the element
</div>

The above code will produce a different line color on each part of the element in HTML.

How To Set Lines With CSS
How To Set Lines With CSS
Border-style Property On CSS

In addition to determining the color of each element’s edge line, CSS also supports setting the border style for each element’s edge line, here are each border style that can be used to determine the type of line.

  • none no border (same as border-width: 0)
  • solid border with one solid line
  • dotted border with dots
  • dashed border with intermittent short line style
  • double border with two solid lines
  • groove border with style like entering into the yard
  • bridge border with style as it arises
  • inset border with a style like security on the page
  • outset border with style like out of the page
  • hidden as none, does not appear on the page.

To determine each type on the edge of the element by using the border – [position] – style command, here is the full explanation.

  • border-top-style is used to determine the style of the top edge
  • border-bottom-style is used to adjust the style at the bottom of the edge
  • border-left-style is used to set the style on the left side of the edge
  • border-right-style is used to set the style to the right of the edge

Let’s look at an example of using each property above.

<style type = "text/css">
    .border {
        border-width: 5px;
        border-top-style: solid;
        border-bottom-style: dotted;
        border-left-style: dashed;
        border-right-style: double;
     }
</style><div class = "border">
     Determines the edge style of the element
</div>

Following is the display of the code above …

How To Set Lines With CSS
How To Set Lines With CSS
Border-width Property On CSS

The border width is used to determine the size or width of the resulting line, in each corner the element can be determined by adding a position to the border-width property. here is a complete code example of each border-width property with its position.

<style type = "text/css">
    .border {
        border-color: #000;
        border-style: solid;border-top-width: 5px;
        border-bottom-width: 3px;
        border-left-width: 2px;
        border-right-width: 1px;
    }
</style><div class = "border">
    Determine the size of the edge of the element
</div>

From the code above it will produce each different size at each edge line position on the element with the class border, here is the browser display the code above.

How To Set Lines With CSS
How To Set Lines With CSS

Short Property To Set Each Edge

In addition to using the border property to specify a line with only one line, in CSS you can use border – [position] to adjust the edges of each position, except if only using the border is used to determine all positions on the edge, but if with a border – [position] each edge can be determined by the style itself.

border-top: 1px solid # 000;

The example property above is used to determine the top line only, here are each property to determine each style in the line with CSS.

  • border-top to set the top line
  • border-bottom to set the line at the bottom
  • border-left is used to set the line on the left
  • border-right is used to set the line to the right

That is each property to determine each edge in a different position, so this tutorial may be useful.

Before going forward, there are a number of articles that you might be looking for.

Read too :

Sending
User Review
0 (0 votes)

Add a Comment

Your email address will not be published. Required fields are marked *