Border - Naukri Code 360

Introduction

Hey Ninjas! In CSS(Cascading Style Sheet), the ‘border’ property is important for building a web page.HTML elements like divs, paragraphs, and images can add decorative and structural elements using CSS borders. Borders can be used to emphasise certain aspects, visually divide material, or highlight particular webpage areas.

It helps set up the border for an element, or we can say that it provides a framework for the component, which helps emphasise the element.

It has different values, such as style, values and color, which help specify the border property.

Border Declaration in CSS

An HTML element's border can be set using the border attribute in CSS. When setting the border property, the shorthand notation or independent properties can define the border's components separately.

Border: solid 4px red;

Here, we are using the border property to define the outer boundary of the element or content. ‘solid’ represents the style of the border, ‘4px’ means the width of the frame, and ‘red’ defines the color of the border.

Border-Style in CSS

The border-style property in CSS is used to describe the border style of an element. An element's top, right, bottom, and left borders can be styled using the border-style property, which accepts a value or a list of values.

The border-style property can be used with the following typical values:

None: No boundary is visible.
Solid: A line is shown that is solid.
Dotted: A string of dots is seen.
Dashed: There are several visible dashes.
Double: There is a double line.
Groove: A 3D border with grooves is visible.
Ridge: A 3D border with ridges is visible.
Inset: The border is shown with a 3D inset.
Outset: A 3D outset boundary is seen.

Border-style: dashed;

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p.dashed {
        border-style: dashed;
    }
</style>
<body>
    <p class="dashed"> Let us try the dashed border! </p>
</body>
</html>

OUTPUT:

Border-style: dotted;

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p.dotted {
        border-style: dotted;
    }
</style>
<body>
    <p class="dotted"> Let us try the dotted border! </p>
</body>
</html>

OUTPUT:

Border-style: double;

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p.double {
        border-style: double;
    }
</style>
<body>
    <p class="double"> Let us try the double border! </p>
</body>
</html>

OUTPUT:

Border-style: solid;

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p.solid {
        border-style: solid;
    }
</style>
<body>
    <p class="solid"> Let us try the solid border! </p>
</body>
</html>

OUTPUT:

Border-style: ridge;

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p.ridge {
        border-style: ridge;
    }
</style>
<body>
    <p class = "ridge"> Here is the ridge border! </p>
</body>

</html>

OUTPUT:

Border-style: groove;

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p.groove {
        border-style: groove;
    }
</style>
<body>
    <p class="groove"> Let us try the groove border! </p>
</body>
</html>

OUTPUT:

Border-style: inset;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p.inset {
        border-style: inset;
    }
</style>
<body>
    <p class = "inset"> Let us try the inset border! </p>
</body>
</html>

OUTPUT:

Border-style: outset;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p.inset {
        border-style: outset;
    }
</style>
<body>
    <p class = "outset"> Let us try the outset border! </p>
</body>
</html>

OUTPUT:

Border-style: hidden;

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p.hidden {
        border-style: hidden;
    }
</style>
<body>
    <p class="hidden"> The border is hidden. </p>
</body>
</html>

OUTPUT:

Border-style: none;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p.none {
        border-style: none;
    }
</style>
<body>
    <p class = "none"> Let us try the border-style 'NONE'. </p>
</body>
</html>

OUTPUT:

Border-style: dashed double dotted solid;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p.mixed {
        border-style: dashed double dotted solid;
    }
</style>
<body>
    <p class="mixed"> Let us try the mixed border! </p>
</body>
</html>

OUTPUT:

Border-Width in CSS

Border-width property defines the width of the element's four borders. The thickness of the frame is indicated in the border-width property. Use the border-width attribute to specify the width of an element's border in CSS. The border-width property accepts a single value or a list of values for an element's top, right, bottom, and left borders.

The following typical values can be used for the border-width property:

Shown with a thin border (typically 1px).
A medium-sized border is shown (typically 3px).
Displayed is a thick border (typically 5px).

The border width can be specified in different sizes, such as:

px
pt
cm
em, etc.

NOTE: Always include the border-style property while using the border-width property! It does not work if the border-style property is not specified.

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p.one {
        border-style: solid;
        border-width: 5px;
    }
</style>
<body>
    <p class="one"> Let us try the border-width having 5px. </p>
</body>
</html>

OUTPUT:

The width property can also be specified by their predefined values:

Thin
Medium
Thick

For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p.two {
        border-style: dashed;
        border-width: medium;
    }
</style>
<body>
    <p class="two"> Border-width is medium! </p>
</body>
</html>

OUTPUT:

Border-Color in CSS

Border-color property defines the color of the element's four borders. The color of the frame is indicated in the border-color property. To change the border color of an element in CSS, use the border color attribute. The border-color property allows you to select the color of an element's top, right, bottom and left borders by accepting a single value or a list of values.

The border-color property can be used to specify the color in various ways.

Named colors like red, green, or blue can be specified.
Hexadecimal code: You may use a number such as #ff0000, #00ff00, or #0000ff.
Use an RGB value such as RGB (255, 0, 0), RGB (0, 255, 0), or RGB (0, 0, 255).
RGBA values include RGBA(255, 0, 0, 0.5), RGBA(0, 255, 0, 0.5), and RGBA (0, 0, 255, 0.5).

There are different properties of border-color properties:

Color Name

Example: “border-color: red;”

Color Hex Code

Example: “border-color: #ff0000;”

Color Rgb Code

Example: “border-color: rgb(255, 0, 0);”

Color HSL value

Example: “border-color: hsl(0, 100%, 50%);”

Transparent property

This property helps in making the border-color transparent.

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p.one {
        border-style: dashed;
        border-width: medium;
        border-color: blue;
    }
</style>
<body>
    <p class="one"> Border-color is dashed blue. </p>
</body>
</html>

OUTPUT:

Second example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p.one {
        border-style: solid;
        border-width: 10px;
        border-top-color: yellow;
        border-right-color: blue;
        border-bottom-color: red;
        border-left-color: black;
        text-align: center;
    }
</style>
<body>
    <p class="one"> Mixed border colors </p>
</body>
</html>

OUTPUT:

Border Radius in CSS

The border-radius property in CSS gives an element's border rounded corners. The horizontal and vertical radii of the border corners are specified by the border-radius property, which accepts one or two length values. The border-radius property helps in rounding up the corners of the border on HTML elements which gives a nice finishing touch if you are making a box.

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p.one {
        border: 1px solid brown;
        border-radius: 20px;
        text-align: center;
        background-color: yellow;
    }
</style>
<body>
    <p class="one"> Border is rounded at corners. </p>
</body>
</html>

OUTPUT:

Frequently Asked Questions

How is border property useful in web development?

The border property is helpful in web development as it helps differentiate between content and the margin. It provides a specific edge to the page, and we can also use borders around specific content to make it stand out from the rest.

Difference between border and margin in CSS.

A border in CSS has padding and content inside it. It has the border-color property too. While in the case of margin, the margin is transparent and generally defined as the outer space of an element’s border.

What are the different ways to define border-image-width property?

The different ways to define a border-image-width property:

Keyword value, i.e., border-image-width: auto;
Length value, i.e., border-image-width: 2rem;
Percentage value, i.e., border-image-width: 50%;
Number value, i.e., border-image-width: 2;
Vertical | Horizontal, i.e., border-image-width:4em 2em;
Top | Horizontal | Bottom, i.e., border-image-width: 6% 10% 12%;
Top | Right | Bottom | Left, i.e., border-image-width: 6% 2em 15% auto;
Predefined value, such as, “inherit”, “initial”, “revert”, “unset”

How do we get rid of an element's border?

To make an element's border disappear, we can set the border property to none, as in border: none. To remove the border from a particular side, we can also set the individual border-top, border-right, border-bottom, and border-left attributes to none.

How can we make a dotted or dashed border?

We may utilise the border-style property with the dashed or dotted value to make a dashed or dotted border by doing as follows: Border styles include dashed and dotted. The border-width property can also change the dash or dot thickness.

Conclusion

This article discusses the topic of CSS borders. In detail, we have seen Border declaration in CSS along with border properties such as style, width, Color and Radius with proper code and output.

We hope this blog has helped you enhance your knowledge of CSS Borders. If you want to learn more, then check out our articles.

And many more on our platform Coding Ninjas Studio.

Refer to our Guided Path to upskill yourself in DSA, Competitive Programming, JavaScript, System Design, and many more! If you want to test your coding ability, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio!

But suppose you have just started your learning process and are looking for questions from tech giants like Amazon, Microsoft, Uber, etc. In that case, you must look at the problems, interview experiences, and interview bundles for placement preparations.

However, you may consider our paid courses to give your career an edge over others!

Happy Learning!