CSS Borders

Used to create visual boundaries around elements in HTML documents.
Borders can be applied to various HTML elements, such as divs, paragraphs, images, buttons, and more.
Borders help improve the visual design and layout of a webpage by separating different elements and providing a sense of structure.
Here are a list of properties used for borders
  1. border-width: Specifies the thickness of the border. You can use values like thin, medium, thick, or specific length values like 1px, 2px, etc.
  2. border-style: Defines the style of the border. Common values include solid, dotted, dashed, double, groove, ridge, inset, and outset.
  3. border-color: Sets the color of the border. You can use color names, hex codes, RGB values, etc.
  4. border: It is a short hand propert to specify all the above properties in one. The order of values is width, style, and color.

Example 

<!DOCTYPE html>
<html>
    <head>
        <title>Border Example</title>
        <style>
            .border-style {
                border-width: 2px;
                border-style: solid;
                border-color: #333;
                border-top-right-radius:20px;
            }
            .border-style-short {
                border: 2px solid #333;
            }
        </style>
    </head>
    <body>
        <p class="border-style">border with seperate border property styles</p>
        <p class="border-style-short">border with single border property style</p>
    </body>
</html>
Run

Border Style

You can use the shorthand border property to set all border properties in one line.
The order of values is width, style, and color.
You can omit any value you don't want to specify.
Here are the properties for individual sides below
  1. border-top: A border at the top
  2. border-bottom: A border at the bottom
  3. border-left: A border at the left
  4. border-right: A border at the right

Example 

<!DOCTYPE html>
<html>
    <head>
        <title>Border Example</title>
        <style>
            .border-style {
                border-top: 2px solid #333;
                border-bottom: 2px solid #333;
                border-left: 2px solid #333;
                border-right: 2px solid #333;
            }
            .border-style-top {
                border-top: 2px solid #333;
            }
            .border-style-bottom {
                border-bottom: 2px solid #333;
            }
            .border-style-left {
                border-left: 2px solid #333;
            }
            .border-style-right {
                border-right: 2px solid #333;
            }
            .border-style-short {
                border: 2px solid #333;
            }
        </style>
    </head>
    <body>
        <p class="border-style">border with seperate border property styles</p>
        <p class="border-style-top">border with only top border property styles</p>
        <p class="border-style-bottom">border with only bottom border property styles</p>
        <p class="border-style-left">border with only left border property styles</p>
        <p class="border-style-right">border with only right border property styles</p>
        <p class="border-style-short">border with single border property style</p>
    </body>
</html>
Run

Border Radius

Used to create rounded corners on an element's border.
You can set the radius for individual corners or use a single value for all corners.
Here are the properties for individual corners below
  1. border-top-left-radius: A border radius at the top left
  2. border-top-right-radius: A border radius at the top right
  3. border-bottom-left-radius: A border radius at the bottom left
  4. border-bottom-right-radius: A border radius at the bottom right

Example 

<!DOCTYPE html>
<html>
    <head>
        <title>Border Example</title>
        <style>
            .border-style {
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                border: 2px solid #333;
            }
            .border-style-top {
                border-top-left-radius: 10px;
                border: 2px solid #333;
            }
            .border-style-bottom {
                border-top-right-radius: 10px;
                border: 2px solid #333;
            }
            .border-style-left {
                border-bottom-left-radius: 10px;
                border: 2px solid #333;
            }
            .border-style-right {
                border-bottom-right-radius: 10px;
                border: 2px solid #333;
            }
            .border-style-short {
                border-radius: 10px;
                border: 2px solid #333;
            }
        </style>
    </head>
    <body>
        <p class="border-style">border with seperate border property styles</p>
        <p class="border-style-top">border with only top border property styles</p>
        <p class="border-style-bottom">border with only bottom border property styles</p>
        <p class="border-style-left">border with only left border property styles</p>
        <p class="border-style-right">border with only right border property styles</p>
        <p class="border-style-short">border with single border property style</p>
    </body>
</html>
Run

Quick Recap - Topics Covered

CSS Borders
Border Property
Border Radius

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

Example js

Example 1 Example 2 Example 3 Example 4 Example 5

Quiz

FEEDBACK