Trusted answers to developer questions

How to set the border using the CSS border-style property

Get Started With Machine Learning

Learn the fundamentals of Machine Learning with this free course. Future-proof your career by adding ML skills to your toolkit — or prepare to land a job in AI or Data Science.

CSS can be used to create borders around HTML elements. The CSS border-style property is used to specify a uniform-styled border around an element.

Syntax

Let’s take a look at the general syntax of the border-style property:

border-style: keyword-value;

How does it work?

The border-style property sets the border on all four sides of an element. Therefore, this function can take a number of different input keyword values.

Let’s take a look at all the possible variants:

1. border-style: value-1

When one value is specified, the same style is applied to all four sides of the element.

2. border-style: value-1 value-2

When two values are specified the first style is applied to the top and bottom borders, while the second style is applied to the left and right borders.

3. border-style: value-1 value-2 value-3

When three values are specified the first style is applied to the top border, the second to the left and right borders,and the third to the bottom border.

4. border-style: value-1 value-2 value-3 value-4

When four values are specified the styles, starting from the top, are applied to each side clockwise (i.e.the top, right, bottom and left).

Here, keyword-value specifies which border style is to be displayed. The following values are permissible:

svg viewer

Example

Now that we are familiar with the syntax and purpose of the border-style property, let’s see how it works:

  • HTML
Single value

Let’s see the results if we give multiple values as inputs to the border-style property:

  • HTML
Multiple values

RELATED TAGS

css
border style
dotted
cascading style sheet
thickness
Copyright ©2024 Educative, Inc. All rights reserved
Did you find this helpful?