CSS Border properties
CSS

CSS Border properties

Editorial Team
Editorial Team

Follow us on Discord or Telegram to get access to free tutorials and updates.

The CSS border properties are used to modify the appearance of the border of an HTML element.

There are mainly four CSS border properties:

  • Border Style – Specify the style of the border.
  • Border Width – Specifies the width of the border.
  • Border Color – Specifies the color of the border.
  • Border Radius – Specifies the radius of the border.

Border Styles

The border style property is used to apply different styles to the border of an HTML element.

PROPERTYUSE
border-style:noneShows no border.
border-style:dottedSets dotted border.
border-style:dashedSets dashed border.
border-style:doubleSets a double border.
border-style:solidSets a solid border.
border-style:grooveSets a grooved border.
border-style:hiddenSets a hidden border.
border-style:ridgeSets a ridged border.

Syntax

<p style="border-style:dashed">I have a dashed border</p>

My border style is set to none


My border style is set to solid


My border style is set to dotted


My border style is set to dashed


My border style is set to double


My border style is set to ridge


My border style is set to groove


My border style is set to hidden

Border Width

The boredr-width property is used to specify the width of the borders. With this property, you can adjust the width of all four borders.

PROPERTYUSE
border-widthSets equal width for all four borders.
border-top-widthSets width for the top border.
border-bottom-widthSets width for the bottom border.
border-left-widthSets width for the left border.
border-right-widthSets width for the right border.

Example

<!DOCTYPE html>
<html>
<head>
    <title>CSS Border Properties</title>
</head>
<style>
    input
    {
        border-top-width: 5px;
        border-bottom-width: 1px;
        border-left-width: 2px;
        border-right-width: 4px;
        border-style:solid;
    }
</style>
<body>
<input type="text" name="myname" placeholder="Check my border">
</body>
</html>

Output

To set equal width for all four borders, use border-width property.

<input type="text" style="border-width:5px">

Border color

With this property, you can set color for the borders of an html element.

You can specify color in any of the following methods:

  • HEX – Eg: #FFFFFF
  • RGB – Eg: rgb(255, 100, 75)
  • Name – Eg: red

Example

<input type="text" style="border-color:green" placeholder="Hey.... I have a colored border.">

PROPERTYUSE
border-top-color Sets the top border color
border-bottom-color Sets the bottom border color
border-left-color Sets the left border color
border-right-color Sets the right border color

Example

<!DOCTYPE html>
<html>
<head>
    <title>CSS Border Properties</title>
</head>
<style>
    input
    {
        border-top-color: red;
        border-bottom-color: green;
        border-left-color: blue;
        border-right-color: tomato;
    }
</style>
<body>
<input type="text" name="myname" placeholder="Check my border">
</body>
</html>

Output

Border radius

This property is used to set the border-radius of an HTML element. This property also has all the four sub-properties.

PROPERTYUSE
border-top-radiusSets the top border radius
border-bottom-
radius
Sets the bottom border
radius
border-left-
radius
Sets the left border
radius
border-right-
radius
Sets the right border
radius

Example

<input type="text" style="border-radius:5px;">