CSS border

CSS border Property

The CSS border property is used to apply border on an HTML element. It is a short hand property that can be used to set the style, width and color of the border in a single line.

Example

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS border Example</title>

    <!-- Internal CSS -->
    <style>
        div {
            width: 300px;
            height: 150px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div>
        <p>CSS border property</p>
    </div>
</body>

</html>

In the above example, the width of the border is 1px, the style of the border is solid and the color of the border is red.

We can also set border's width, style and color separately using the CSS property border-width, border-style and border-color.

Example

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS border Example</title>

    <!-- Internal CSS -->
    <style>
        div {
            width: 300px;
            height: 150px;
            border-width: 5px;
            border-style: solid;
            border-color: green;
        }
    </style>
</head>

<body>
    <div>
        <p>CSS border-width, border-style and border-color property</p>
    </div>
</body>

</html>

CSS Border Styles

There are eight types of border styles available in CSS and they are:

dotted
dashed
solid
double
groove
ridge
inset
outset

Example dotted dashed solid double groove ridge inset outset

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS border style Example</title>

    <!-- Internal CSS -->
    <style>
        div {
            width: 200px;
            height: 60px;
            border: 10px dotted green;
        }
    </style>
</head>

<body>
    <div>
        <p>dotted style border</p>
    </div>
</body>

</html>

CSS Border Sides

The CSS border property apply border to all the four sides of an HTML element. You can also apply border to the individual side of an element using the border-top, border-bottom, border-left and border-right CSS property.

Example border-top border-bottom border-left border-right

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS border side Example</title>

    <!-- Internal CSS -->
    <style>
        div {
            width: 200px;
            height: 60px;
            background-color: yellow;
            border-top: 5px solid red;
        }
    </style>
</head>

<body>
    <div>
        <p>border top</p>
    </div>
</body>

</html>

CSS Border Radius

The CSS border-radius property allows you to round the corners of an element's border box. It applies to all four border corners by default. You can also apply the border-radius property to individual corners of an element's border box.

Example border-radius border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS border radius Example</title>

    <!-- Internal CSS -->
    <style>
        div {
            width: 200px;
            height: 60px;
            background-color: yellow;
            border: 2px solid red;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p>border radius</p>
    </div>
</body>

</html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS border style Example</title>  <style> div { width: 200px; height: 60px; border: 10px dotted green; } </style> </head> <body> <div> <p>dotted style border</p> </div> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS border style Example</title>  <style> div { width: 200px; height: 60px; border: 10px dashed green; } </style> </head> <body> <div> <p>dashed style border</p> </div> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS border style Example</title>  <style> div { width: 200px; height: 60px; border: 10px solid green; } </style> </head> <body> <div> <p>solid style border</p> </div> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS border style Example</title>  <style> div { width: 200px; height: 60px; border: 10px double green; } </style> </head> <body> <div> <p>double style border</p> </div> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS border style Example</title>  <style> div { width: 200px; height: 60px; border: 10px groove green; } </style> </head> <body> <div> <p>groove style border</p> </div> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS border style Example</title>  <style> div { width: 200px; height: 60px; border: 10px ridge green; } </style> </head> <body> <div> <p>ridge style border</p> </div> </body>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS border style Example</title>  <style> div { width: 200px; height: 60px; border: 10px inset green; } </style> </head> <body> <div> <p>dotted outset border</p> </div> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS border style Example</title>  <style> div { width: 200px; height: 60px; border: 10px outset green; } </style> </head> <body> <div> <p>outset style border</p> </div> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS border side Example</title>  <style> div { width: 200px; height: 60px; background-color: yellow; border-top: 5px solid red; } </style> </head> <body> <div> <p>border top</p> </div> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS border side Example</title>  <style> div { width: 200px; height: 60px; background-color: yellow; border-bottom: 5px solid red; } </style> </head> <body> <div> <p>border bottom</p> </div> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS border side Example</title>  <style> div { width: 200px; height: 60px; background-color: yellow; border-left: 5px solid red; } </style> </head> <body> <div> <p>border left</p> </div> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS border side Example</title>  <style> div { width: 200px; height: 60px; background-color: yellow; border-right: 5px solid red; } </style> </head> <body> <div> <p>border right</p> </div> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS border radius Example</title>  <style> div { width: 200px; height: 60px; background-color: yellow; border: 2px solid red; border-radius: 20px; } </style> </head> <body> <div> <p>border radius</p> </div> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS border top left radius Example</title>  <style> div { width: 200px; height: 60px; background-color: yellow; border: 2px solid red; border-top-left-radius: 20px; } </style> </head> <body> <div> <p>border top left radius</p> </div> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS border top right radius Example</title>  <style> div { width: 200px; height: 60px; background-color: yellow; border: 2px solid red; border-top-right-radius: 20px; } </style> </head> <body> <div> <p>border top right radius</p> </div> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS border bottom left radius Example</title>  <style> div { width: 200px; height: 60px; background-color: yellow; border: 2px solid red; border-bottom-left-radius: 20px; } </style> </head> <body> <div> <p>border bottom left radius</p> </div> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS border bottom right radius Example</title>  <style> div { width: 200px; height: 60px; background-color: yellow; border: 2px solid red; border-bottom-right-radius: 20px; } </style> </head> <body> <div> <p>border bottom right radius</p> </div> </body> </html>

CSS border Property

CSS Border Styles

CSS Border Sides

CSS Border Radius

Our Courses

News Updates