CSS (Cascading Style Sheets) is a stylesheet language used to design a webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles on web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.
In this article, we will learn how to declare a partial border to a box.
CSS property used to provide a partial border to an element?
No, there is no property present in CSS with the help of which we can provide a partial border to an element but we can achieve this task by using other properties of CSS.
Properties used:
- display: This property is used to specify the display behavior (the type of rendering box) of an element.
- margin-left: This property is used to set the left margin of an element.
- margin-right: This property is used to set the right margin of an element.
- border-bottom: This property is used to set the style of the bottom border for different elements.
- content: This property is used with the::before selector and ::after pseudo-elements, to insert generated content.
- width: This property is used to provide width to the element.
Example: In the below example, we have used the above properties to make a partial border around the element.
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title> Bulma</title>
<link rel="stylesheet"href=
<style>
h1 {
display: table;
margin-left: auto;
margin-right: auto;
}
h1:after {
border-bottom: 4px solid red;
content: '';
display: block;
margin-left: 35%;
width: 50%;
}
</style>
</head>
<body>
<center>
<div></div>
<h1 style="color:green;font-size:30px;">
GeeksforGeeks
</h1>
</center>
</body>
</html>
|
Output: