Languages
[Edit]
EN

CSS - border property example

8 points
Created by:
Elias999
819

In this article, we're going to have a look at how to use border style property. Most commonly used border style features are: width, style, color and radius.

Quick overview:

More detailed property description is placed below.

1. Border style property

Edit

This section shows how to to change border style.

There are two ways to set border style:

  • with border-style property what was described in this section,
  • with border property: border: width style color; what was presented in examples at begining of this article,
    e.g. border: 1px solid red;

There are avaliable different values for border style.

border-styledescription
dotteddotted border
dasheddashed border
solidsolid border
doubledouble border
groove3D grooved border (effect depends on the border-color value)
ridge3D ridged border (effect depends on the border-color value)
inset3D inset border (effect depends on the border-color value)
outset3D outset border (effect depends on the border-color value)
noneno border
hiddenhidden border
CSS - border-style example
CSS - border-style property example

Run below example to see how border-style property works.

2. Border width property

Edit

This section shows how to to change border width.

There are two ways to set border width:

  • with border-width property what was described in this section,
  • with border property: border: width style color; what was presented in examples at begining of this article,
    e.g. border: 1px solid red;

Note: read this article for more details.

Note: border width property works with different kind of units: absolute and relative. Read this article to know about kind od units that can be used with styles.

CSS - border-width property example
CSS - border-width property example

 

Run below example to see how border-width property works.

3. Border color property

Edit

This section shows how to to change border color.

There are two ways to set border color:

  • with border-color property what was described in this section,
  • with border property: border: width style color; what was presented in examples at begining of this article,
    e.g. border: 1px solid red;

Note: read this article for more details.

Note: border color value can be written in few ways. Read this article to know how to write color in diferent way in CSS.

CSS - border-color property example
CSS - border-color property example

Run below example to see how border-color property works.

4. Border radius property

Edit

Read this article.

 

See also

Edit
  1. CSS - outline property example

Alternative titles

  1. border style property example
1
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

CSS

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join