Review the declaration of border style shown below. what is the corresponding longhand syntax

From W3C Wiki

Índice Show

border-color
border-width

The border style properties specify the line style of a box's border.

[Syntax]

Example

[style.css]

p{ width: 300px; height: 100px; } p#dot{ border-style: dotted; } p#sol{ border-style: solid; }

[index.html]

This is a paragraph(dotted) This is a paragraph(solid)

border-color

The border color properties specify the color of a box's border.

[Syntax]

border-color: <color> | transparent

color: Specifies a color value:
- color keywords
- color values

Example

[style.css]

p{ width: 300px; height: 100px; border-style: solid; border-color: red; }

[index.html]

This is a paragraph

border-width

The border width properties specify the width of the border area.

[Syntax]

border-width: thin | medium | thick | <length>

Example

[style.css]

p#thin{ border-width: thin; } p#med{ border-width: medium; } p#thick{ border-width: thick; }

[index.html]

This is a paragraph(thin) This is a paragraph(medium) This is a paragraph(thick)

Challenge

1. Styles the side navigation by border.

[style.css]

nav ul li{ font-size: 1.5em; padding-left: 10px; margin-bottom: 7px; border-left-width: 5px; border-left-color: #990066; border-left-style: solid; }

2. Styles the news headers.

[style.css]

#main header{ padding-left: 10px; margin-bottom: 10px; border-top-width: 1px; border-top-color: #A6A6A6; border-top-style: dashed; border-bottom-width: 1px; border-bottom-color: #A6A6A6; border-bottom-style: dashed; }

3. Styles the table of recruit application page(recruit.html).

[style.css]

#main2 table{ border-top-width: 1px; border-top-color: #A6A6A6; border-top-style: solid; border-left-width: 1px; border-left-color: #A6A6A6; border-left-style: solid; margin: 0px; padding: 0px; border-collapse: collapse; } #main2 th, #main2 td{ border-right-width: 1px; border-right-color: #A6A6A6; border-right-style: solid; border-bottom-width: 1px; border-bottom-color: #A6A6A6; border-bottom-style: solid; margin: 0px; padding: 5px 10px; } #main2 th{ width: 150px; } #main2 td{ width: 410px; }

In the next week, you will learn the layouting the HTML documents. "Floating"

Like you saw in the previous page, there are many properties to consider when dealing with borders.

To shorten the code, it is also possible to specify all the individual border properties in one property.

The border property is a shorthand property for the following individual border properties:

border-width
border-style (required)
border-color

p { border: 5px solid red;

}

Result:

Try it Yourself »

You can also specify all the individual border properties for just one side:

p { border-left: 6px solid red;

}

Result:

Try it Yourself »

p { border-bottom: 6px solid red;

}

Result:

Try it Yourself »

View Discussion

Improve Article

Save Article

Like Article

Read

Discuss

View Discussion

Improve Article

Save Article

Like Article

The border-style CSS property is a shorthand property that sets the line style for all four sides of an element’s border.

Note: The border-style property can take One to Four values at a time.

Syntax:

border-style: value;

Default Value

Property Values:

none: No border is created and it is left plain.
hidden: Just like none, it doesn’t show any border unless a background image is added, then the border-top-width will be set to 0 irrespective of the user-defined value.
dotted: A series of dots are displayed in a line as the border.
solid: A single solid and bold line is used as a border.
dashed: A series of square dashed lines are used as a border.
double: Two lines placed parallel to each other act as the border.
groove: Displays a 3D grooved border, its effect depends on border-color value.
ridge: Displays a 3D ridged border, its effect depends on border-color value.
inset: displays a 3D inset border, its effect depends on border-color value.
outset: Displays a 3D outset border, its effect depends on border-color value.

The border-style property is a shorthand for the following CSS properties:

The border-style property may be defined by using one, two, three, or four values, as given below:

If a single value is assigned, it will set the style for all 4 sides.
If two values are assigned, the first style is set to the top and bottom sides and the second will be set to the left & right sides.
If three values are assigned, the first style is set to the top, the second is set to the left and right, the third is set to the bottom.
If four-style values are assigned, the styles are set to the top, right, bottom, and left, which follows the clockwise order.

The below examples illustrate the use of the border-style property.

Example 1: This example is using only one value for all borders.

<!DOCTYPE html>
<html>
<head>
    <title>Dotted Borders</title>
    <style>
    .GFG {
        border-style: dotted;
        border-width: 6px;



        background: #009900;
        padding: 30px;
        text-align: center;
        width: 300px;
        height: 120px;
    }
    </style>
</head>
<body>
    <div class="GFG">
        <h2>GeeksforGeeks</h2> </div>
</body>
</html>

Output:

Example 2: This example is using multiple values for borders.

<!DOCTYPE html>
<html>
<head>
    <title>Dotted Borders</title>



    <style>
    .GFG {
        border-style: solid double dashed dotted;
        border-width: 6px;
        background: #009900;
        padding: 30px;
        text-align: center;
        width: 300px;
        height: 120px;
    }
    </style>
</head>
<body>
    <div class="GFG">
        <h2>GeeksforGeeks</h2> </div>
</body>
</html>