IT Course CSS Basics 024_Borders, Outlines, Shadows

Borders

Borders in CSS are important style properties used to create visual boundaries around elements.

Border Properties

• border-width: Sets the width of the border.
• border-style: Sets the style of the border (solid, dotted, dashed, double, groove, ridge, inset, outset, none).
• border-color: Sets the color of the border.

Example:

1
    .example1 {
2
        border-width: 2px;
3
        border-style: solid;
4
        border-color: #333;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example2 {
9
        border: 2px solid #333;
10
        /* Shorthand property */
11
        width: 200px;
12
        height: 200px;
13
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Effect:

Border Direction

border-top, border-right, border-bottom, border-left: Set the top, right, bottom, and left borders respectively.

Example:

1
    .example1 {
2
        border-top: 2px solid #333;
3
        border-right: 1px dashed #555;
4
        border-bottom: 3px solid #777;
5
        border-left: 1px dotted #999;
6
        width: 200px;
7
        height: 200px;
8
    }

1
    <div class="example1"></div>

Effect:

Rounded Corners

border-radius: Sets the rounded corners of the border.

Example:

1
    .example1 {
2
        border-radius: 10px;
3
        /* All corners have 10px rounded corners */
4
        border: 1px solid black;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example2 {
9
        border-top-left-radius: 10px;
10
        border-top-right-radius: 20px;
11
        border-bottom-left-radius: 30px;
12
        border-bottom-right-radius: 40px;
13
        border: 1px solid black;
14
        width: 200px;
15
        height: 200px;
16
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Effect:

Shadows

Box-shadow in CSS is a property that creates shadow effects around elements. Shadows can be used to enhance the three-dimensional appearance of elements, making pages look more vivid. By adding the inset keyword before the box-shadow value, you can create inner shadows. Multiple box-shadow values can be separated by commas to add multiple shadow effects. If the element has rounded corners, shadows will be applied to the rounded corners accordingly.

Shadows can have multiple parameters, including horizontal offset, vertical offset, blur radius, shadow color, etc.

• Horizontal offset: The horizontal offset of the shadow.
• Vertical offset: The vertical offset of the shadow.
• Blur radius: The blur level of the shadow.
• Spread radius: The size of the shadow, positive values expand, negative values shrink.
• Shadow color: The color of the shadow.

Example:

1
    .base {
2
        border: 1px solid black;
3
        width: 200px;
4
        height: 200px;
5
    }
6
    .example1 {
7
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
8
    }
9
    .example2 {
10
        box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
11
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>

Effect:

Outlines

Outline in CSS is a visible border that can be added around elements, usually used to emphasize the outer edge of elements. Outlines do not affect layout and do not change the size or position of elements. Outlines are commonly used for focus visualization of form elements, active states of links, etc.

• outline-color: Sets the color of the outline.
• outline-style: Sets the style of the outline.
• outline-width: Sets the width of the outline.
• outline-offset: Sets the outline offset property, the gap between the outline and the border.

Example:

1
    .example1 {
2
        outline-color: blue;
3
        outline-style: dotted;
4
        outline-width: 2px;
5
        outline-offset: 5px;
6
        border: 1px solid red;
7
        width: 200px;
8
        height: 200px;
9
    }
10
    .example2 {
11
        outline: 2px solid green;
12
        border: 1px solid red;
13
        width: 200px;
14
        height: 200px;
15
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Effect: