Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to specify no border in CSS
Borders can be a useful design element for adding definition and structure to your web pages. However, there may be times when you want to remove the border from an element or prevent a border from being applied in the first place.
In this article, we will show you how to specify no border in CSS using a variety of techniques. Whether you want to remove an existing border or prevent a border from being applied to an element.
Example
Before proceeding further let’s understand the basic structure of an HTML document.
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
The phrases DOCTYPE, HTML, head, body, h1, and p are all examples of HTML elements. An element is defined by its starting tag, its content, and its closing tag. Let's examine each of the elements used in the example above one at a time.
This element, which declares that the document is an HTML5 page, is called <!DOCTYPE html>.
<html> This tag, which is referred to as the HTML page's root element, contains the entirety of an HTML document.
The tag <head> contains all the metadata for the HTML page.
The <title> tag is used to indicate the HTML page's title, which appears on the browser tab.
The HTML page's <body> is described as all the content, including headings, paragraphs, graphics, hyperlinks, tables, lists, etc.
The huge heading is written using the <h1> tag.
A paragraph is defined by the symbol <p>.
There are 3 basic methods to specify no border in CSS
Using the border-width attribute
Both headers will get border-color and border-style parameters so that text with and without borders may be displayed.
We will use border-width: 0 to create a borderless area for the no-border heading.
Example
In the below example, we used two headings to show how border width can make a border, no border, and to do that we used a style attribute inside the heading tag, in this case, it is <h1>. We applied the border color red, a border style solid, and gave it a border width of 0 so that the width of the border reduces to 0 and it is no longer visible, this makes the border no border.
And to prove that border width is working to create no border, we applied the same properties of the first heading to the second heading except the border width, and we can see the results in the output.
<!DOCTYPE html> <html> <head> <title>No Border CSS</title> </head> <body> <h1 style="border-color: red; border-style: solid; border-width: 0"> How to specify no border in CSS </h1> <h1 style="border-color: red; border-style: solid">How to specify no border in CSS </h1> </body> </html>
In the output, it is clear that the first heading has no border, and the second heading has a border.
Using the border attribute
To display text with and without a border, we will assign both headers border-color and border-style parameters.
We will use the border: 0 command to create a heading with no border, which will produce no border.
Example
In the below example, we again used two headings to show no border property. In the first heading, we applied the border color green, border style solid, and border 0, we are familiar with the first two properties and the third property, but is used to remove any kind of border from all around the element on which the border is applied, so the work of border ‘0’ is to remove the border from around first heading.
In the second heading, we have applied only two properties that is the border color green and the border style solid which means the second heading should show the border and the first heading should not.
<!DOCTYPE html> <html> <head> <title>No Border CSS</title> </head> <body> <h1 style="border-color: green; border-style: solid; border: 0"> Text without border </h1> <h1 style="border-color: green; border-style: solid;"> Text with border </h1> <h1 style="border-color: green; border-style: solid; border: none"> With "none" as the value </h1> </body> </html>
In the output, the first heading has no border, and the second heading has a border.
Note − we can also assign the value none instead of 0 to the attribute border.
Conclusion
In this article, we saw how to create no border using CSS. We took a look at various approaches and various border properties to do so.
2K+ Views
