PV Code

1. `background-color`

Sets the background color of an element.

This box has a background color and adjusts to its content.


                            .box {
                            background-color: lightblue;
                            padding: 20px;
                            }

2. `background-image`

Adds an image as the background of an element.

This box has a dynamic height depending on its content.


                            .box {
                            background-image: url('https://via.placeholder.com/300');
                            background-size: cover;
                            padding: 20px;
                            }

3. `border`

Adds borders around an element.

This box has a border and dynamic size based on its content.


                            .box {
                            border: 3px solid red;
                            padding: 20px;
                            }

4. `border-radius`

Rounds the corners of an element.

Rounded corners example with dynamic height.


                            .box {
                            border: 2px solid black;
                            border-radius: 15px;
                            padding: 20px;
                            }

5. `box-shadow`

Adds shadow around an element for a raised effect.

This box has a shadow and adjusts to its content size.


                            .box {
                            box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
                            padding: 20px;
                            }

6. `background-repeat`

Controls how the background image is repeated.

This background does not repeat and fits dynamically.


                            .box {
                            background-image: url('https://via.placeholder.com/50');
                            background-repeat: no-repeat;
                            padding: 20px;
                            }

7. `background-size`

Defines how the background image is scaled.

Background image scales dynamically to fit its content.


                            .box {
                            background-image: url('https://via.placeholder.com/50');
                            background-size: contain;
                            padding: 20px;
                            }

8. `border-style`

Specifies the style of the border, e.g., solid, dotted, dashed.

Dotted Border Example


                            .box {
                            border: 3px dotted green;
                            padding: 20px;
                            }

9. `border-width`

Specifies the thickness of the border.

Thick Border Example


                            .box {
                            border: 10px solid orange;
                            padding: 20px;
                            }

10. `background-position`

Defines the position of the background image.

This background is centered and adjusts dynamically.


                            .box {
                            background-image: url('https://via.placeholder.com/300');
                            background-position: center;
                            background-size: cover;
                            padding: 20px;
                            }

11. `border-color`

Defines the color of the border.

This border is blue.


                            .box {
                            border: 3px solid;
                            border-color: blue;
                            padding: 20px;
                            }

12. `background-attachment`

Defines whether the background image scrolls with the page or is fixed.

Background is fixed and doesn’t scroll.


                            .box {
                            background-image: url('https://via.placeholder.com/300');
                            background-attachment: fixed;
                            background-size: cover;
                            }

13. `background-clip`

Specifies whether the background extends into the border or padding.

Background is clipped to the content box.


                            .box {
                            border: 3px solid black;
                            background-color: lightgreen;
                            background-clip: content-box;
                            padding: 20px;
                            }

14. `border-collapse`

Specifies whether table borders are collapsed into a single border or separated.

Cell 1

Cell 2


                            table {
                            border-collapse: collapse;
                            border: 1px solid black;
                            }
                            td {
                            border: 1px solid black;
                            padding: 10px;
                            }

15. `border-spacing`

Specifies the spacing between table borders when not collapsed.

Cell 1

Cell 2


                            table {
                            border-spacing: 15px;
                            border: 1px solid black;
                            }
                            td {
                            border: 1px solid black;
                            padding: 10px;
                            }

16. `border-image`

Applies an image as the border of an element.

This border uses an image.


                            .box {
                            border: 15px solid transparent;
                            border-image: url('https://via.placeholder.com/50') 30 round;
                            padding: 20px;
                            }

17. `background-blend-mode`

Defines how background layers blend together.

Background layers are blended.


                            .box {
                            background: url('https://via.placeholder.com/150') no-repeat, lightblue;
                            background-blend-mode: multiply;
                            padding: 20px;
                            }

18. `border-radius` with percentage

Creates circular or elliptical borders using percentages.

Circular Border


                            .box {
                            border: 2px solid black;
                            border-radius: 50%;
                            padding: 20px;
                            }

19. `box-decoration-break`

Specifies how box decorations (e.g., borders, padding) behave across multiple lines.

This box uses `box-decoration-break` to clone styles on breaks.


                            .box {
                            border: 2px solid black;
                            padding: 10px;
                            box-decoration-break: clone;
                            }

CSS Backgrounds & Borders