CSS Borders

CSS borders are used to add borders around HTML elements. CSS can be used to specify the border width, style, color, and other properties of borders.

Border Width

The border-width property specifies the width of the border. The border-width property can be set to a single value, or to a list of three values, which represent the width of the top, right, bottom, and left borders, respectively.

For example, the following CSS rule will set the border width of all <h1> elements to 1px:

h1 {
  border-width: 1px;
}

Border Style

The border-style property specifies the style of the border. The border-style property can be set to one of the following values:

solid: The border is a solid line.
dotted: The border is a dotted line.
dashed: The border is a dashed line.
double: The border is a double line.
groove: The border has a grooved appearance.
ridge: The border has a ridged appearance.
inset: The border is inset from the element.
outset: The border is outset from the element.

For example, the following CSS rule will set the border style of all <h1> elements to solid:

h1 {
  border-style: solid;
}

Border Color

The border-color property specifies the color of the border. The border-color property can be set to a hexadecimal color code, an RGB color value, or an HSL color value.

For example, the following CSS rule will set the border color of all <h1> elements to red:

h1 {
  border-color: red;
}

Other Border Properties

CSS also includes a number of other border properties, such as border-radius, border-top-left-radius, and border-bottom-right-radius. These properties can be used to control the appearance of borders in more detail.

For example, the following CSS rule will set the border radius of all <h1> elements to 10px:

h1 {
  border-radius: 10px;
}

Task

Give the ordered list a border of 2px solid #ccc and the form a border-radius of 10px. Run the code to see the final results and experiment with the code to get used to it.

<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
    <style>
        body {
            line-height: 1.6;
            background-image: url(https://www.learnwebstack.com/wp-content/uploads/2023/10/19449741-scaled.jpg);
            background-size: cover;
        }
        header { 
            color: #fff;
            background-color: #333;
            font-family: 'Arial', sans-serif;
        }
        ul { 
            color: #007BFF;
            font-family: 'Roboto', sans-serif;
            font-weight: bold;
         }
         /* Add the ordered list code below */
         
         /* Add the ordered list code above */
         ol li {
            font-style: italic;
         }
         header h1 { 
            font-size: 36px;
            line-height: 1.2;
        }
         h1, footer {
           text-align: center;
        }
        /* Change the code below */
        form {
            background-color: #f2f2f2; /* Light gray */
            width: 80%;
        }
        /* Change the code above */
     </style>
</head>
<body data-rsssl=1>
    <header>
        <h1>Welcome to <i>My Portfolio<i/></h1>
        <img decoding="async" src="https://www.learnwebstack.com/wp-content/uploads/2023/09/pexels-cong-h-1404819.jpg" alt="Cat the Dev." />
    </header>
    <section>
    <h2>Skills</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</section>
<section>
    <h2>Projects</h2>
    <ol>
        <li>Portfolio Website</li>
        <li>E-commerce App</li>
        <li>Blog Website</li>
    </ol>
</section>
<section>
    <h2>Education</h2>
    <table border="1" cellpadding="10" cellspacing="5">
    <tr>
        <th>Position</th>
        <th>Company</th>
        <th>Duration</th>
    </tr>
    <tr>
        <td>Web Developer</td>
        <td>TumkurLab</td>
        <td>2020-2022</td>
    </tr>
</table>
</section>
<section>
    <h2>Contact Me</h2>
    <form action="">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="Submit">
</form>
</section>
    <footer>
        © 2023 My Portfolio. Created by <a href="https://example.com">Your Name</a>
    </footer>
</body>

Conclusion

CSS borders can be used to add borders around HTML elements. By understanding the different CSS border properties, you can create web pages that look the way you want them to look.

Here are some tips for using CSS borders:

Use a variety of border properties to create a visually appealing web page.
Use border colors to create a sense of hierarchy on your web pages.
Use border styles to create different visual effects.
Use border radius to create rounded corners.

CSS Borders

Add LearnWebstack.com to your Homescreen!