CSS Border Properties

CSS

0 Comments

The border properties let you add or remove a border (or change how the border looks).

Example

<style>
	.btn {
		...

        border: none;
		border-radius: 5px;
	}

    ...
</style>

<input type="button" class="btn" value="Button 1">
<input type="button" class="btn gray" value="Button 2">

Result

border property
Used to add or remove the border. Here, we're removing the default border.
border-radius property
Makes the corners rounded. We usd 5px here, but if you want them even more round, just increase this number.

How to add borders

In our example, we decided to remove the border, so you didn't get to see how to add one. If you replace Line 5 in the previous code with what's shown below, you'd get a 2 pixel solid black border around the button.

border: 2px solid black;

Other border styles

If you don't want a solid border, there are also other styles available. Common ones include: dotted, dashed, solid, and none.

You can also specify each of the border properties separately:

.btn {
    ...

    border-width: 2px;
    border-style: dotted;
    border-color: red;

    /* the above code is equivalent to: */
    border: 2px dotted red;
}

Practice in Editor

Leave a Comment