Example 01: Using CSS to give a button a solid border in an HTML file
In this example, we will be using a style tag CSS to modify a button in an HTML file. We will add a solid border to the default button which has no boundary to highlight it from the background and the rest of the page.
We opened the style tag and started a button parameter for styling. In this, we gave the button a background color using HTML reference code. Then we gave the button a border by writing it as a keyword and gave it three properties: the size of the button’s border, the state of the border, and then the color of the border. Then in the style, we gave the button some padding, text alignment, and display properties to make the button adjustable to the browser and more visible.
Then, we closed the style and head tag and moved to the body tag. In this tag, we have given our HTML page a heading using the h1 tag and then opened the button tag. After this, we will close both the tags and save this script in the “.html” format to open it on our browser.
After running the script on our browser, we will get the above output. The above output shows that the button has the style just as we specified in the style tag in the header of the file.
Example 02: Using CSS to give a dotted border to a button in an HTML file
In this example, we will add a dotted border to the default button, which has no border, to distinguish it from the backdrop and the rest of the page. The script will be developed in Notepad++ and will use a CSS style tag to modify a button in an HTML file.
We opened the style tag and began customizing the button parameter. We used HTML reference code to give the button background color. Then, we gave the button a border by writing it as a keyword and giving it three properties: “4px,” which is the size of the border; “dotted,” which is the form of the border; and “black,” which is the color of the border.
Then, we added padding, text alignment, display settings, and font size to the button to make it more browser-adjustable and noticeable. The style and head tags were then closed. Next is the body tag. We used the h1 tag to provide our HTML page a heading and then opened the button tag in the body tag. We wrote some text that will appear on the button in this tag. After that, we will close both tags and save this script in “.html” format so that we can run it on our browser.
We will get the above output after running the script in our browser. The snippet shows that the button has a black dotted border as defined in the style tag in the file’s header.
Example 03: Using CSS to give a button a solid round-edged border in an HTML file
In this example, we’ll use CSS style tags to change the appearance of a button in an HTML file. We will create a solid border with round corners and some color to distinguish the default button from the foreground and the rest of the page.
We opened the style tag in the above script and began modifying a button parameter in the HTML file’s header. Then, we gave the button a border by writing it as a keyword and assigning it three properties: “4px,” which is the border’s size; “solid,” which is the border’s shape; and “black,” which is the border’s color. Then, we added another border property called border-radius and its value is assigned in pixels to round the border edges. We then closed the style and head tags before moving on to the body tag. We wrote some text in between the button tags that will appear on the button.
As the above output shows, the border of the button has rounded edges and all the other styling that we defined in the header of the file.
Example 04: Using inline CSS to add a border to a button in an HTML file
In this example, we will be using inline CSS styling on a button to give it a border in an HTML file. All the styling that will be done on the button would be given inside the button tag.
In the above script, we will be doing all the styling in the body of the file. First, we will open the h1 tag to give a heading to the page. Then, we will open the button tag. In this tag, we will define the style of the button. We will initiate the style with the border keyword and start giving it different properties like size, form, color, padding, and alignment. After this, we closed the tag and wrote the text that will appear on the button. Then, we closed all the tags and ran this file to get the below output:
As we can see in the output, the button has all the styling that we provided in the button tag and we have successfully added a border to a button using inline CSS.
Example 05: Using CSS to give a double border to a button in an HTML file
We will add a double border to a button in this example. The script will be developed in Notepad++ and will use a CSS style tag method to modify a button in an HTML file.
We opened the style tag and began altering a button element in the HTML file’s header. The border was then added to the button by writing it as a keyword and assigning it three properties: “10px,” the border’s size; “double,” the border’s shape; and “black,” the border’s color.
The button has all of the stylings from the style tag and we have successfully applied a border to a button using CSS.
Conclusion
In this article, we discussed the border of a button using CSS in an HTML file. The default button of a browser usually has no styling and is just a simple white square. So, we use CSS to style this element and make it adaptable to the HTML page. In this article, we discussed different examples in which we added a border to a button by using different approaches, and all these examples were implemented in Notepad++.
