Open In App

How to declare a partial border to a box ?

Last Updated : 06 Jun, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!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:

 



Similar Reads

How is border-box different from content-box ?
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 w
3 min read
Which property specifies the distance between nearest border edges of marker box and principal box ?
In this article, we will see the property that specifies the distance between the nearest border edges of the marker box and the principal axis. The marker-offset is the property that specifies the distance between the nearest border edges of the marker box and the principal axis. Syntax: style=" marker-offset:em/cm"; Example 1: In this example, we
2 min read
Which one should we use 'border: none' or 'border: 0 '?
In this article, we will learn the validity of CSS border properties. We can specify the no border property using CSS border: none, border-width : 0, border : 0 properties. Syntax: border: none | 0 Differences: border: noneborder : 0For this property, the browser does not render.For this property, the browser renders border-color and border-width p
2 min read
How to use margin, border and padding to fit together in the box model ?
In this article, we will learn how the different parts of the box i.e., margin, border, padding &amp; content fits together to create the box. The box model specifies how the HTML elements are organized &amp; modeled in the browser engine along with deriving the CSS properties that define the dimension for the HTML elements. The box model can be de
5 min read
Foundation CSS Prototyping Utilities Border box
Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. T
2 min read
Primer CSS Box Dashed Border
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, an
2 min read
Difference between -webkit-box-shadow &amp; box-shadow in CSS
In this article, we will find difference between 'webkit-box-shadow' &amp; 'box-shadow' in CSS. Webkit-box-shadow: The webkit-box-shadow property in CSS is used to apply a box-shadow. The webkit-box-shadow is a browser-specific implementation for WebKit browsers like Google Chrome and Safari. Syntax: webkit-box-shadow: h-offset v-offset blur; Advan
1 min read
Difference between alert box and confirmation box in JavaScript
Both the boxes appear as a pop-up or you can call them pop-up box. There are three types of pop-up box, you can have basic knowledge by reading What are the types of Popup box available in JavaScript ? and JavaScript | Dialogue Boxes article. Alert BoxConfirmation BoxPrompt Box All of these popups open a modal window, meaning that the user cannot i
3 min read
How to change Input box borders after filling the box using JavaScript ?
In this article, we will change the input border after filling in the text on the input text field. The onchange event attribute works when the value of the element changes and selects the new value from the list. Approach: Whenever the input value is changed with some value by the user, the onchange event attribute is triggered. After the event is
2 min read
Difference between alert box and prompt box in JavaScript
1. Alert box : An alert box is one type of popup boxes in JavaScript which is often used to make sure that information have come through the user. So, the user will have to click "OK" to proceed when an alert box pops up on the window. Syntax : window.alert("message"); Another syntax to use alert box is : alert("message"); 2. Prompt box : It is als
2 min read