CSS Border: Learn to Set the border Shorthand, Properties and Radius

More on Borders

The border shorthand defines multiple values for borders in one declaration.

The following example has three values – width, style, and color. You'll see that the border around an HTML element <p> will be blue, dotted and 3 pixels thick.

I have a 3px width dotted blue border.

p {
   border: 3px dotted blue;
}

Note: if you omit values from the shorthand, border takes the default values of those properties.

The default values are the following:

• border-width: medium.
• border-color: (current color of the element).
• border-style: does not have a default value.

Warning: without values for border-style, the border shorthand won't work.

This code example shows the standard way of using the CSS border shorthand:

h1 {
   border: 5px solid red;
}
a {
   border: 2px solid green; 
}

The border is convenient for creating four identical borders that surround an element. To create unique borders, you need to style each border separately by using the following properties:

Tip: the border cannot be used for setting unique border-image. Use this property separately.

In the following example, we use border-left shorthand property and the background-color.

I have a 3px width solid green left border (and a background color!)

p {
   border-left: 3px solid green;
   background-color: grey;
}

border-style

The border-style property determines how the four border lines look.

The property can have any of the following values:

solid – Sets a solid border

double – Sets a double border

groove – Sets a 3D grooved border

inset – Sets a 3D inset border

ridge – Sets a 3D ridged border

dashed – Sets a dashed border

dotted – Sets a dotted border

outset – Sets a 3D outset border

hidden – Sets a hidden border

none – Sets no border

Note: It is possible to have a mixed style border.

The last line in the following example demonstrates how easy it is to combine different CSS border styles for one element.

p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.inset {border-style: inset;}
p.ridge {border-style: ridge;}
p.dashed {border-style: dashed;}
p.dotted {border-style: dotted;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
p.none {border-style: none;}
p.mixed {border-style: groove dotted solid dashed;}

The next example shows that border-style property can have from one to four HTML border style values: top, right, bottom, left.

I have no border.

I have a dotted border.

I have a mixed style border.

p.none {
   border-style: none;
}

p.dotted {
   border-style: dotted;
}

p.mixed {
   border-style: dotted dashed solid double;
}

• If you add two values, CSS assumes that the first value is for the top and bottom, and the second one for the right and left.
• If you add three values, CSS assumes the first one is for top, the second for right and left, and the third for bottom wall.
• If you add four values, this is the order: top, right, bottom, and left.

border-width

The border-width property determines the thickness of the CSS borders.

Note: both specific parameters (such as pt, cm, px, em) and predefined values (such as thick, medium, or thin) work with this property.

The border-width property can have values defining border thickness for all four sides at once. It can also determine border thickness for each separate wall of the border (top, right, left, bottom).

The following example shows how border-width affects the appearance of borders:

• CSS defines the width of the first border with the thin keyword.
• The second one has a specific value (3px).
• The last one has different values assigned for each wall.

I have a thin border.

I have a 3px width border.

I have a mixed width border.

p.thin {
   border-width: thin;
   border-style: solid;
}

p.inpix {
   border-width: 3px;
   border-style: solid;
}

p.mix {
   border-width: 2px 5px 4px 5px;
   border-style: solid;
}

• If you add two values, CSS assumes that the first one is for horizontal walls (top and bottom) and the second one for the vertical walls (right and left).
• If you add three values, CSS assumes the first one for top, the second for right and left, and the third for the bottom wall.
• If you add four values, the values apply in this order: top, right, bottom, and left.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

border-color

The border-color sets colors for borders. CSS border can have values in the following formats:

• Keywords – color name such as blue
• HEX – hexadecimal value such as #0000FF
• RGB – red green blue value such as rgb(0, 0, 255)
• HSL – hue, saturation, and lightness such as hsl(0, 50%, 50%)
• transparent

Note: you can also use the border-color property to define the CSS border color for each border wall separately by using the top, left, right, and bottom.

In the example below, you can see how we define the border-color using different CSS color value indicators:

• The first one has a color keyword black.
• The second one a HEX value #E9385A.
• The last one has color names specified for each separate wall.

I have a black border.

My border color is #e9385a.

I have a mixed color border.

p {
   border-color: black;
   border-style: solid;
}

p.hex {
   border-style: solid;
   border-color: #e3985a;
}

p.mix {
   border-color: red green blue orange;
   border-style: solid;
}

• Two values: the first value is for the top and bottom, and the second one for the right and left.
• Three values: CSS assumes the first one is for top, the second for right and left, and the third for the bottom wall.
• Four values: top, right, bottom, and left.

border-radius

The border-radius property adds rounded borders to an HTML element.

In the example below, we use a border and assign the width (2px), the style (solid), the color (#e9385a), and the border radius (5px).

I have a rounded border.

p {
   border: 2px solid #e9385a;
   border-radius: 5px;
}

border-radius can have from one to four values:

• One value sets radius to all four corners.
• Two values: the first one applies to top-left and bottom-right corners, the second sets top-right, and bottom-left corners.
• Three values: the second value sets the top-right and bottom-left.
• Four values apply radius in this order: top-left, top-right, bottom-right, bottom-left corners.

Note: you can define the values with either specific indicators like pt, cm, px, em, or using percentage values from 0% to 100%. The default is 0.

Individual Borders in CSS

To specify each border style individually, use the following properties:

• border-left-style
• border-right-style
• border-top-style
• border-bottom-style

In the following example, we assign a border to an HTML element <p>. Using individual border styling properties, we set vertical walls (left & right) as solid, and the horizontal ones (top & bottom) as dotted.

I have different borders on individual sides.

p {
   border-right-style: solid;
   border-left-style: solid;
   border-bottom-style: dotted;
   border-top-style: dotted; 
}

CSS Border: Summary

• CSS borders are similar to outlines. The biggest difference is that outlines do no occupy space since they are outside the content of elements.
• By defining borders in CSS with one declaration, you produce code that is easier to manage.