CSS properties related to box model decoration

Articles

This article explains the CSS properties related to box model decoration.

You can learn how to write properties such as borders and shadows.

YouTube Video

HTML for Preview

css-decoration.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-decoration.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Decoration Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>border</h3>
 23            <section>
 24                <header><h4>border: 3px solid #333</h4></header>
 25                <section class="sample-view">
 26                    <div class="border-solid">Solid Border</div>
 27                </section>
 28                <header><h4>border: 3px dashed #666</h4></header>
 29                <section class="sample-view">
 30                    <div class="border-dashed">Dashed Border</div>
 31                </section>
 32                <header><h4>border: 5px double #999</h4></header>
 33                <section class="sample-view">
 34                    <div class="border-double">Double Border</div>
 35                </section>
 36                <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
 37                <section class="sample-view">
 38                    <div class="border-rounded">Rounded Border</div>
 39                </section>
 40            </section>
 41        </article>
 42
 43        <article>
 44            <h3>border-radius</h3>
 45            <section>
 46                <header><h4>border-radius: 20px</h4></header>
 47                <section class="sample-view">
 48                    <div class="border-radius-all-rounded">All corners rounded</div>
 49                </section>
 50                <header><h4>border-top-left-radius: 20px</h4></header>
 51                <section class="sample-view">
 52                    <div class="border-radius-top-left-rounded">Top-left rounded</div>
 53                </section>
 54                <header><h4>border-radius: 50px / 25px</h4></header>
 55                <section class="sample-view">
 56                    <div class="border-radius-ellipse-corners">Ellipse corners</div>
 57                </section>
 58            </section>
 59        </article>
 60
 61        <article>
 62            <h3>outline</h3>
 63            <section>
 64                <h4>Outline Examples</h4>
 65                <header><h4>outline: 2px solid red</h4></header>
 66                <section class="sample-view">
 67                    <div class="outline-solid">Solid Red Outline</div>
 68                </section>
 69                <header><h4>outline: 3px dashed blue</h4></header>
 70                <section class="sample-view">
 71                    <div class="outline-dashed">Dashed Blue Outline</div>
 72                </section>
 73                <header><h4>outline: 4px double green</h4></header>
 74                <section class="sample-view">
 75                    <div class="outline-double">Double Green Outline</div>
 76                </section>
 77                <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
 78                <section class="sample-view">
 79                    <div class="outline-offset">Outline with Offset</div>
 80                </section>
 81            </section>
 82        </article>
 83
 84        <article>
 85            <h3>box-shadow</h3>
 86            <section>
 87                <h4>Box Shadow Examples</h4>
 88                <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
 89                <section class="sample-view">
 90                    <div class="box-shadow-basic-shadow">Basic Shadow</div>
 91                </section>
 92                <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
 93                <section class="sample-view">
 94                    <div class="box-shadow-inset-shadow">Inset Shadow</div>
 95                </section>
 96                <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
 97                <section class="sample-view">
 98                    <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
 99                </section>
100            </section>
101        </article>
102    </main>
103</body>
104</html>

Decoration

`border` Property

 1.border-solid, .border-dashed, .border-double, .border-rounded {
 2    background-color: lightsteelblue;
 3}
 4
 5.border-solid {
 6    border: 3px solid #333;
 7}
 8
 9.border-dashed {
10    border: 3px dashed #666;
11}
12
13.border-double {
14    border: 5px double #999;
15}
16
17.border-rounded {
18    border: 2px solid #000;
19    border-radius: 15px;
20}

The border property is used in CSS to set the frame of an element. border consists of three elements: width, style, and color, and they are combined to set the element's frame.

Basic Structure of `border`

 1/* Shorthand syntax */
 2border: [border-width] [border-style] [border-color];
 3
 4/* Example of border property */
 5border: 5px solid white;
 6
 7/* Example of individual properties */
 8border-width: 5px;
 9border-style: solid;
10border-color: black;

Use border-width to specify the thickness of the border. Units are specified in px, em, %, etc.
Specify the type of border with border-style. You can specify the following values.
- Style Values:
  - none (no border)
  - solid (solid line)
  - dotted (dotted line)
  - dashed (dashed line)
  - double (double line)
  - groove (grooved line)
  - ridge (ridged line)
  - inset (inset shadow line)
  - outset (outset shadow line)

Specify the color of the border with border-color. Color can be specified using color names, rgb(), rgba(), hex, etc.

Individual Settings for Each Side

1.box {
2    border-top: 3px solid red;    /* Top border: 3px solid red */
3    border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4    border-bottom: 2px double green; /* Bottom border: 2px double green */
5    border-left: 1px dotted black;  /* Left border: 1px dotted black */
6}

You can also set different styles for each side like this.

Individual Settings for Width, Style, and Color

 1.box {
 2    /* Specify border width for top, right, bottom, and left */
 3    border-width: 2px 4px 6px 8px;
 4
 5    /* Specify border style for top, right, bottom, and left */
 6    border-style: solid dotted dashed double;
 7
 8    /* Specify border color for top, right, bottom, and left */
 9    border-color: red green blue yellow;
10}

You can also specify each aspect separately using border-width, border-style, and border-color.

Combining with `border-radius`

1.box-rounded {
2    border: 2px solid #000;
3    border-radius: 10px; /* Round corners by 10px */
4}

Using the border-radius property, you can round the corners of the border.

`border-radius` Property

 1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Round all corners */
 6.border-radius-all-rounded {
 7    border-radius: 20px;
 8}
 9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12    border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17    border-radius: 50px / 25px;
18}

The border-radius property is used to round the corners of an element. You can smoothly curve the four corners of an HTML element, transforming rectangles or squares into a rounded design.

Explanation:

border-radius-all-rounded class makes all the corners round with 20 pixels, resulting in a smoothly rounded box.
border-radius-top-left-rounded class rounds only the top-left corner with 20 pixels, keeping other corners square.
border-radius-ellipse-corners class creates elliptical corners, resulting in a box with horizontally stretched rounded shape.

The format of the `border-radius` property

1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;

The value of the border-radius property is usually specified in pixels or percentages. Also, you can set from 1 to 4 values.
- Specifying one value makes all corners uniformly round.
- Specifying two values applies the first value to the top-left and bottom-right corners, and the second value to the top-right and bottom-left corners.
- By specifying four values, you can set different radii for each corner. The values are applied clockwise from the top-left.
You can also specify individually like border-top-left-radius.

1border-radius: 50px / 25px;

The border-radius property can also specify vertical and horizontal radii individually to make the corners elliptical. In this case, separate with /.
- For example, specifying 50px / 25px makes the horizontal radius 50 pixels and the vertical radius 25 pixels.

Summary

border-radius is a property to round the corners of an element.
You can specify the roundness of the corners in pixels or percentages, apply it to all corners, specific corners, or make them elliptical.
It is useful for flexible designs and customizing user interfaces.

`outline` Property

 1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
 2    background-color: lightsteelblue;
 3}
 4
 5.outline-solid {
 6    outline: 2px solid red;
 7}
 8
 9.outline-dashed {
10    outline: 3px dashed blue;
11}
12
13.outline-double {
14    outline: 4px double green;
15}
16
17.outline-offset {
18    outline: 2px solid purple;
19    outline-offset: 10px;
20}

The outline property is a CSS property to set the line drawn around an element.

outline is similar to border, but differs in the following points:.

outline does not affect the box model of the element, so it does not impact the layout of the element.
Since outline is drawn outside the element, it appears outside of border.
border is drawn inside the element, so it can affect the size and layout of the element.

In this example, the outline property is set as follows:.

The outline-solid class sets a 2px thick solid red outline.
The outline-dashed class sets a 3px blue dashed outline.
The outline-double class sets a 4px thick green double-line outline.
The outline-offset class sets a 10px space between the outline and the element.

Basic Syntax

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}

`outline-width`

outline-width specifies the thickness of the outline.
You can specify specific values like thin, medium, thick, or in units like px, em.

`outline-style`

outline-style specifies the style of the outline.
You can specify styles like solid, dotted, dashed, double, groove, ridge, inset, outset, none, etc.

`outline-color`

outline-color specifies the color of the outline.
You can specify any color using names, HEX, RGB, etc.

`outline-offset`

outline-offset specifies the distance between the outline and the element.
You can specify exact values in units like px, em, etc.

`box-shadow` Property

 1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Basic shadow */
 6.box-shadow-basic-shadow {
 7    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 8}
 9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18                -5px -5px 10px rgba(255, 0, 0, 0.5);
19}

The box-shadow property is used to add shadows to elements. By using this property, you can create shadows around elements to express a sense of dimensionality and depth.

Explanation:

In the box-shadow-basic-shadow class, a blurred black shadow is displayed at the bottom right of the element.
In the box-shadow-inset-shadow class, a blurred shadow is displayed inside the element. With the shadow entering inside, you can achieve a sunken design.
In the box-shadow-multiple-shadow class, two shadows, black and red, are applied to the element. Since they are displayed at different positions, a three-dimensional effect is achieved.

`box-shadow` Property Format

1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];

Meaning of each value

The first horizontal offset is the value of the horizontal offset, specifying the position of the shadow from the left side of the element. Specifying a positive value places the shadow to the right, and a negative value places it to the left.

The second vertical offset is the value of the vertical offset, specifying the position of the shadow from the top side of the element. Specifying a positive value places the shadow below, and a negative value places it above.

The third blur radius is the value for the amount of blur, specifying the blurriness of the shadow. The larger the value, the more the shadow spreads, resulting in a more blurred shadow. Specifying a positive value places the shadow below, and a negative value places it above. This is optional, and the default is 0, meaning no blur on the shadow.

The fourth spread radius is the spreading range value, specifying how much the shadow spreads. Specifying a positive value will make the shadow grow larger, while a negative value will make it shrink. This value is also optional.

The fifth color is the color value, specifying the color of the shadow. Colors can be set using color names, RGB, HEX, HSL, and other color models available in CSS. If omitted, the default text color of the element (value of the color property) is applied.

You can also specify the inset keyword first. Specifying the inset keyword draws the shadow inside the element instead of outside. It is also possible to set multiple shadows separated by commas.

Example of `box-shadow`

Basic shadow example

1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}

The horizontal offset is 10px, creating a shadow 10 pixels to the right.
The vertical offset is 10px, creating a shadow 10 pixels downward.
The blur radius is 5px, resulting in a shadow blur of 5 pixels.
The color is rgba(0, 0, 0, 0.5), resulting in a semi-transparent black.

Example of inner shadow

1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}

Using inset draws the shadow inside the element.

Example of multiple shadows

1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}

You can also set multiple shadows separated by commas. In this example, two shadows are applied: a black shadow and a red shadow.

Summary

box-shadow is a property used to add shadows to elements to create a sense of depth.
By combining horizontal and vertical offsets, blur, spread radius, and color, a variety of effects can be achieved.
You can draw shadows inside with inset, and you can also set multiple shadows at once.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

CSS properties related to box model decoration

YouTube Video

HTML for Preview

Decoration

border Property

Basic Structure of border

Individual Settings for Each Side

Individual Settings for Width, Style, and Color

Combining with border-radius

border-radius Property

Explanation:

The format of the border-radius property

Summary

outline Property

Basic Syntax

outline-width

outline-style

outline-color

outline-offset

box-shadow Property

Explanation:

box-shadow Property Format

Meaning of each value

Example of box-shadow

Basic shadow example

Example of inner shadow

Example of multiple shadows

Summary

YouTube Video

`border` Property

Basic Structure of `border`

Combining with `border-radius`

`border-radius` Property

The format of the `border-radius` property

`outline` Property

`outline-width`

`outline-style`

`outline-color`

`outline-offset`

`box-shadow` Property

`box-shadow` Property Format

Example of `box-shadow`