Scribd Logo
Upload

Welcome to Scribd!

  • 20BEC111 WT Practical6

    Uploaded by

    Dhruv Prajapati
    1 views5 pages
    The document demonstrates various CSS border properties including solid, dotted, double, none, border-radius, and box-shadow. It includes HTML code for a page with multiple div elements styled with different border properties and a dark mode theme. The conclusion states the experiment demonstrated CSS radius and border properties and provided a basic understanding.

    Original Description:

    Original Title

    20BEC111_WT_Practical6

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document demonstrates various CSS border properties including solid, dotted, double, none, border-radius, and box-shadow. It includes HTML code for a page with multiple div elements styled with different border properties and a dark mode theme. The conclusion states the experiment demonstrated CSS radius and border properties and provided a basic understanding.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    1 views5 pages

    20BEC111 WT Practical6

    Uploaded by

    Dhruv Prajapati
    The document demonstrates various CSS border properties including solid, dotted, double, none, border-radius, and box-shadow. It includes HTML code for a page with multiple div elements styled with different border properties and a dark mode theme. The conclusion states the experiment demonstrated CSS radius and border properties and provided a basic understanding.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 5

    Department of Electronics and Communications

    Engineering Institute of Technology, Nirma University


    2CSOE77 Web technologies
    20BEC111 - Harshesh Shah

    Practical 6
    Demonstrate Radius and Border properties in CSS.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Border and Property Example</title>
    <style>
    body {
    background-color: #f7f7f7;
    font-family: Arial, sans-serif;
    color: #333;
    }

    .basic-border {
    border: 1px solid black;
    padding: 20px;
    width: 300px;
    text-align: center;
    margin: 50px auto;
    background-color: #fff;
    }

    .dotted-border {
    border: 1px dotted red;
    padding: 20px;
    width: 300px;
    text-align: center;
    margin: 50px auto;
    background-color: #fff;
    }

    .double-border {
    border: 4px double blue;
    padding: 20px;
    width: 300px;
    text-align: center;
    margin: 50px auto;
    background-color: #fff;
    }
    .borderless {
    border: none;
    padding: 20px;
    width: 300px;
    text-align: center;
    margin: 50px auto;
    background-color: #ccc;
    }

    .rounded {
    border: 2px solid #ddd;
    padding: 20px;
    width: 300px;
    text-align: center;
    margin: 50px auto;
    background-color: #fff;
    border-radius: 10px;
    }

    .shadow {
    border: 2px solid #ddd;
    padding: 20px;
    width: 300px;
    text-align: center;
    margin: 50px auto;
    background-color: #fff;
    box-shadow: 5px 5px 10px rgba(0,0,0,.1);
    }
    body.dark-mode {
    background-color: #333;
    color: #eee;
    }

    .basic-border.dark-mode {
    border-color: #eee;
    background-color: #444;
    }

    .dotted-border.dark-mode {
    border-color: #f00;
    background-color: #555;
    }

    .double-border.dark-mode {
    border-color: #00f;
    background-color: #666;
    }

    .borderless.dark-mode {
    background-color: #222;
    }

    .rounded.dark-mode {
    border-color: #ddd;
    background-color: #444;
    }

    .shadow.dark-mode {
    border-color: #ddd;
    background-color: #333;
    box-shadow: 5px 5px 10px rgba(255,255,255,.1);
    }

    h1 {
    margin-top: 0;
    font-size: 32px;
    color: #666;
    }
    p {
    font-size: 16px;
    color: #999;
    }
    </style>
    </head>
    <body class="dark-mode">

    <div class="basic-border">
    <h1>Basic Border - 20BEC111</h1>
    <p>This is an example of a basic border with 1px solid black.</p>
    </div>

    <div class="dotted-border">
    <h1>Dotted Border</h1>
    <p>This is an example of a dotted border with 1px dotted red.</p>
    </div>

    <div class="double-border">
    <h1>Double Border</h1>
    <p>This is an example of a double border with 4px double blue.</p>
    </div>

    <div class="borderless">
    <h1>Borderless</h1>
    <p>This is an example of a borderless element with none as the border
    style.</p>
    </div>

    <div class="rounded">
    <h1>Rounded Corners</h1>
    <p>This is an example of a border with rounded corners using
    border-radius.</p>
    </div>

    <div class="shadow">
    <h1>Box Shadow</h1>
    <p>This is an example of a border with a box shadow using box-shadow.</p>
    </div>
    </body>
    </html>

    Conclusion: In this experiment, I learned and demonstrated some of CSS Radius and Border properties
    and made a basic understanding.

    You might also like