Contents
Defining border in CSS
The CSS border
property allows you to define a line border for an element:
It is actually a shorthand for three CSS line border subproperties:
border-width
- border-style
border-color
Working with border: CSS syntax
To define a line border in CSS, follow the syntax example below:
border: width style color;
The available values will be explained in the following section.

- 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
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable

- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion

- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
Property values
Value | Description | Defined in | Default value |
---|---|---|---|
width | CSS border width | Length units or keywords (thin , medium , thick ) |
medium |
style | CSS border style | Keywords (none , solid , hidden , dashed , dotted , double , groove , ridge , inset , outset ) |
none |
color | CSS border color | Color names, RGB, RGBA, HEX, HSL or HSLA values. | currentcolor |
Note: you don't need to define all of the subproperties for line borders necessarily. The order is also not important.
Browser support

Chrome

Edge

Firefox

IE

Opera

Safari
Mobile browser support

Chrome

Firefox
