Do you think IIT Guwahati certified course can help you in your career?
Introduction
In CSS, the border property can be used to provide frames to the elements or boxes. This CSS property allows you to style, size and colour the element's border. Using the border property, we can create a variety of frames for your elements, enhancing the appearance of your webpage.
Border Style Properties
The border-stylemust be defined for the border to appear. They specify the type of border to display. The available values for this property are:
border-style: dotted;
HTML:
<divstyle="border-style: dotted">
<p> This is a preview of dotted border-style.</p>
</div>
border-style: dashed;
HTML:
<divstyle="border-style: dashed">
<p> This is a preview of dashed border-style.</p>
</div>
border-style: solid;
HTML:
<divstyle="border-style: solid">
<p> This is a preview of solid border-style.</p>
</div>
border-style: double;
HTML:
<divstyle="border-style: double">
<p> This is a preview of double border-style.</p>
</div>
border-style: groove;
HTML:
<divstyle="border-style: groove">
<p> This is a preview of groove border-style.</p>
</div>
border-style: ridge;
HTML:
<divstyle="border-style: ridge">
<p> This is a preview of ridge border-style.</p>
</div>
border-style: inset;
HTML:
<divstyle="border-style: inset">
<p> This is a preview of inset border-style.</p>
</div>
border-style: outset;
HTML:
<divstyle="border-style: outset">
<p> This is a preview of outset border-style.</p>
</div>
The appearance of specific values like ridge, inset, outset, and groove can vary slightly depending on the browser. Hence, it is recommended to test your page in different browsers like Chrome, Firefox, Safari etc.
The border-style property can be applied on one side explicitly by using border-top-style, border-right-style, border-left-styleand border-bottom-style.
Border Color Properties
This property is used to set the colour of the four borders. By default, it uses current-color, the box’s current text colour.
The following code will produce a box with text color and the border color as red.
.container{
color: red;
border: solid;
}
The following code will produce a box with text colour as red and the border colour as blue.
.container{
color: red;
border: solidblue;
}
The border-color property can be applied on one side explicitly by using border-top-color, border-right-color, border-left-colorand border-bottom-color.
Border Width Properties
The border-width property determines the thickness of the four lines in the border. The default value of this property is medium. Without defining a border style, the border width will not be visible.
The predefined values for this property are: thin, medium and thick.
Rather than using the predefined values, you can also use specific values in em, px, pt, cm, rem, % etc.
The border shorthand property allows us to define all parts of the border in one declaration.
.container{border: 1pxdottedred;}
In border shorthand, the values given are in the order border-width, border-style and border-color.
Logical Properties
Instead of explicitly defining the border properties for top, bottom, left or right, you could apply logical properties using block flow and inline flow.
HTML:
<body>
<divclass="container">
<p>Applying Logical properties to Border.</p>
</div>
</body>
CSS:
.container{
width: 250px;
height: 200px;
border: 2pxdashedmaroon;
border-inline-end: 2pxsolid green;
}
This would produce a result as follows:
Here, the container class has its width set as 250px and height as 200px. The .container has defined all sides of its border, having 2px border width, dashed border style and maroon colour. The border-inline-end is defined as having 2px border width, solid border style and green colour.
This means that the solid green border will be on the right side in languages written from left to right, like English. Whereas for languages like Arabic, where the language is from right-to-left, the solid green border will be on the left side of the box.
Rounded Borders
The border-radius property is used to rounded corners to the box containing your element.
HTML:
<divclass="container">
<p>Rounded Borders.</p>
</div>
CSS:
.container{
Width:200px; height:100px;
border: 2pxsolidred;
border-radius: 1em;
}
Output:
You can also define the border-radius for each side border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.
There is also a provision to apply shorthand to border-radius by specifying them in the following order: top left, top right, bottom and then bottom left.
HTML:
<divclass="container"></div>
CSS:
.container{
width: 200px;
height: 200px;
border: 2pxdashedred;
border-radius: 1em2em3em4em;
}
Border Images
The border-image property allows us to set a source image as the border, manage how that image is sliced, the image width, how the image should repeat and how far the border is outset from the edge.
The border-image-width property is like the border-width property- it defines the width of your body image. The border-image-outset property lets you set the distance between the border-image and the box that it wraps around.
The border-image-slice property allows us to slice an image into nine parts, made up of 4 split lines. In this, we define the top, right, bottom and left offset values.
.container{
border-image: url('image.jpg');
border-image-slice: 61585148;
}
After the offset values are defined, we have nine sections of the images: 4 corners, four edges and a middle section. In the above image, C stands for corners, and E stands for edges. The border-image-repeat property defines how those edges fill their space, and the border-image-width property controls the size of the slices
Border Image Repeat
This property determines how the border image would repeat.
The default value is stretch, which causes the source image to stretch and fill the available space.
The repeat value causes the source image to repeat as many times as possible, clipping the edge regions to achieve it.
The round value is similar to repeat. Rather than clipping the image edge regions to fit as many as possible, this value stretches the image and repeats it. This results in achieving a flawless repeat.
The space value is the same as the repeat, but it adds some space between edges to create a pattern.
Frequently Asked Questions
What are the properties of CSS borders?
The three properties of the border that you can change are border-color,border-style and border-width.
How can I add a simple line to my webpage?
To add a horizontal line in the markup you can simply use the <hr> tag.
What is the use of the border-image property?
The border-image property allows us to set a source image as the border, manage how that image is sliced, the image width, how the image should repeat and how far the border is outset from the edge.
What are the different values that we can give for the border-style property?
The different values that we can give for the border-style property are dotted, dashed, solid, double, groove, ridge and inset.
Key Takeaways
Borders in CSS are used to enhance the appearance of your webpage by providing a variety of properties to create borders for boxes appropriately and stylishly. It allows us to give different colours, thicknesses, rounded corners to borders, making it elegant. Images could also be set as borders by giving suitable values to the border-image property.
Already excited?. Learn Web development from top courses provided by Coding Ninjas like ‘Full Stack Web Development Course with Node.js + HTML/CSS/JS’. These courses will help you learn and master web development so that you can become a ninja in it!.
Live masterclass
SDE LinkedIn & Naukri Hacks to Get More Recruiter Calls
by Pranav Malik
18 Apr, 2025
01:30 PM
Microsoft SDE Roadmap: Use AI Tools to Succeed
by Pranav Malik
14 Apr, 2025
01:30 PM
Amazon's expert tips on Non-tech to Data Analytics transition
by Abhishek Soni
15 Apr, 2025
01:30 PM
Crack Big4 Data Analytics interview: Dos & Don'ts
by Alka Pandey
17 Apr, 2025
01:30 PM
High-Paying SDE Role: How to job hunt effectively
by Shantanu Shubham
16 Apr, 2025
01:30 PM
SDE LinkedIn & Naukri Hacks to Get More Recruiter Calls
34+ registered 
