CSS Tutorial
CSS Borders
div {
border-style: solid|groove|ridge|double;
border-color: black; /* any value of type:color is allowed. */
border-width: thin|medium|thick|npx;
}
Borders are lines that are used to frame the edges of an object.
The border
properties are:
- border-style
- border-width
- border-color
div {
border-style: solid|groove|ridge|double;
border-color: black; /* any value of type:color is allowed. */
border-width: thin|medium|thick|npx;
}
Border Style
The border-style
property specifies what kind of border to display.
The border-style
property value can be one of:
- solid
- groove
- ridge
- double
Syntax
selector {
border-style: solid|groove|ridge|double;
}
See the border-style Values
Border Width
The border-width
property is used to set the width of the border. The width can be set in pixels, or by using one of the three pre-defined values: thin
, medium
, or thick
.
The border-width
property value can be one of:
- thin
- medium
- thick
- npx
Syntax
selector {
border-width: thin|medium|thick|npx;
}
5px
or 5em
).border-width
property will not work if it is used alone unless the border-style
property has been defined.Examples
div {
border-style: solid;
border-width: 3px;
}
span {
border-style: solid;
border-width: thick;
}
Border Color
The border-color
property is used to set the color of the border.
The border-color
property value can be set by.
- a HEX value - e.g
#FF00FF
- an RGB value - e.g
rgb(255,0,0)
- a color name - like
green
! - a HSL - like
hsl(240,100%,50%)
- You can also set to
transparent
if you do not want any color.
border-color
property does not work when used alone unless the border-style
property has been defined.Example
p {
border-style: solid;
border-color: green;
}
span {
border-style: solid;
border-color: #ff00ff;
}
Border - Individual sides
In CSS it is possible to specify different borders for different sides
Syntax
selector {
border: style width color;
}
Setting Styles for the Top Border
Example
div {
border-top-style: solid|groove|ridge|double;
border-top-color: green; /* any value of type:color is allowed */
border-top-width: thin|medium|thick|npx;
}
5px
).Setting Styles for the Bottom Border
Example
div {
border-bottom-style: solid|groove|ridge|double;
border-bottom-color: green; /* any value of type:color is allowed */
border-bottom-width: thin|medium|thick|npx;
}
Setting Styles for the Left Border
Example
div {
border-left-style: solid|groove|ridge|double;
border-left-color: green; /* any value of type:color is allowed */
border-left-width: thin|medium|thick|npx;
}
Setting Styles for the Right Border
Example
div { border-right-style: solid|groove|ridge|double;
border-right-color: green; /* any value of type:color is allowed */
border-right-width: thin|medium|thick|npx;
}
Example Derived
With the explanation above, we are able to style the border-top, border-bottom, border-left, border-right of the below.
Example
Border Shorthand Property
The border styles can be derived at once using the border
shorthand property.
Examples
p {
border: solid 3px yellow;
}
The borders of all the <p>
elements on the webpage will be affected by the above CSS code.
What You Should Know at the End of This Lesson
- You should be able to tell briefly what CSS Borders is all about.
- You should be able to style the individual border with different styles.
- You should be able to style all the borders using the
border
shorthand property.