Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ‚̧ ūüíĽ
We are community of people that helps each other.

If you are beginner in IT field, you are more then welcome to ask questions, it will help you to learn faster. We are here to help you.

We are always beginner in something, we just need to remember it along the way.

there are no wrong questions - Ask Question

CSS - border property example

0 contributions
8 points

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:

/* 1. */
div {
    border: 1px solid red;
}

/* 2. */
div {
    border-width: 1px;
    border-style: solid;
    border-color: red;
}

/* 3. */
div {
 /* border: width, style, color */
    border: 1px solid red;
    border-radius: 3px; /* for all corners */
}

/* 4. */
div {
    border: 1px solid red;
 /* border-radius: left-top, top-right, bottom-right, bottom-left */
    border-radius: 3px 3px 10px 10px;
}

More detailed property description is placed below.

1. Border style property

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.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    div { margin: 5px; padding: 10px; border: 5px silver; }
  </style>
</head>
<body>
  <div style="border-style: dotted">border-style: dotted</div>
  <div style="border-style: dashed">border-style: dashed</div>
  <div style="border-style: solid">border-style: solid</div>
  <div style="border-style: double">border-style: double</div>
  <div style="border-style: groove">border-style: groove</div>
  <div style="border-style: ridge">border-style: ridge</div>
  <div style="border-style: inset">border-style: inset</div>
  <div style="border-style: outset">border-style: outset</div>
  <div style="border-style: none">border-style: none</div>
  <div style="border-style: hidden">border-style: hidden</div>
</body>
</html>

2. Border width property

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.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    div { margin: 5px; padding: 10px; border: solid silver; }
  </style>
</head>
<body>
  <div style="border-width: 1px">border-width: 1px</div>
  <div style="border-width: 2px">border-width: 2px</div>
  <div style="border-width: 10px">border-width: 10px</div>
</body>
</html>

3. Border color property

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.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    div { margin: 5px; padding: 10px; border: 5px solid; }
  </style>
</head>
<body>
  <div style="border-color: green">border-color: green</div>
  <div style="border-color: #FF00FF">border-color: #FF00FF</div>
  <div style="border-color: rgb(255, 0, 0)">border-color: rgb(255, 0, 0)</div>
  <div style="border-color: rgba(255, 0, 0, 0.5)">border-color: rgba(255, 0, 0, 0.5)</div>
</body>
</html>

4. Border radius property

Read this article.

0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more