All CSS Border Plus Radius Style

Everyone is familiar with css parameter border, but there are things that we do not know about it?

Basics
Everyone familiar with such use:

border: 1px solid black;

This single-pixel solid border. Slightly changing the syntax:

border-width: thick;
border-style: solid;
border-color: black;

For example at border-width parameter has three options: thin, medium, thick: If you want to change the border color when mouse over an object:

If you want to change the border color when mouse over an object:

.box {
    border: 1px solid red;
}
.box:hover {
    border: 1px solid green;
}

But since it is easier to realizeand correct:

.box {
    border: 1px solid red;
}
.box:hover {
    border-color: green;
}

Border-Radius

border-radius - this is a new option to display the CSS3 rounded corners, which works correctly in all modern browsers except Internet Explorer 8 (and older versions). For each angle can be assigned its rounding:

For each angle can be assignedits rounding:

border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 0;

In the above example does not necessarily assign "0» border-top-right-radius, and border-bottom-left-radius, if they do not inherit the values ​​that need to be changed. 

whole structure can be compressed into one line:

/* top left, top right, bottom right, bottom left */
border-radius: 20px 0 30px 0;

And here is how you can draw a lemon means CSS:

.lemon {
   width: 200px; height: 200px;
   background: #F5F240;
   border: 1px solid #F0D900;
   border-radius: 10px 150px 30px 150px;
}

Here we describe the simplest and most popular examples of setting border. We now turn to more complex.

Several boundaries

Border-Style
solid, dashed, and dotted - the most popular values ​​for border-style, but let's look at the other, for example, groove and ridge.

border: 20px groove #e3e3e3;

Or in more detail:

border-color: #e3e3e3;
border-width: 20px;
border-style: groove;

Outline
The most popular way to create a double border - is a parameter outline:

.box {
   border: 5px solid #292929;
   outline: 5px solid #e3e3e3;
}

This method works fine, but is limited to the creation of a double frame. If you want to display multiple element boundaries, it is necessary to use a different technique.
Pseudo-
You can use this structure:

.box {
  width: 200px; height: 200px;
  background: #e3e3e3;
  position: relative;
  border: 10px solid green;
}
/* Create two boxes with the same width of the container */
.box:after, .box:before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
.box:after {
  border: 5px solid red;
  outline: 5px solid yellow;
}
.box:before {
  border: 10px solid blue;
}

Maybe it's not the most elegant solution, but it works
Box-Shadow
Another way, using the shadows:

.box {
    border: 5px solid red;
     box-shadow:
       0 0 0 5px green,
       0 0 0 10px yellow,
       0 0 0 15px orange;
}

Changing the angles
By setting border-radius can be used two values, using the "/", for example:

border-radius: 50px / 100px; /* horizontal radius, vertical radius */

It's the same thing:

border - top - left - radius : 50 px 100 px ;
 border - top - right - radius : 50 px 100 px ;
 border - bottom - right - radius : 50 px 100 px ;
 border - bottom - left - radius : 50 px 100 px ;

This technicals is useful if you want to simulate a curved, rather than rounding.For example, so you can get the effect of twisted paper:

.box {
    width: 200px; height: 200px;
    background: #666;
    border-top-left-radius: 15em 1em;
    border-bottom-right-radius: 15em 1em;
}

CSS figures
The following examples assume a markup:

<div class="box"></div>

And this basic css:

.box {
   width: 200px;
   height: 200px;
   background: black;
}

The most common example of using CSS is to display shapes of arrows. To understand how this works, you need to learn how to use a separate border-color for each side, and setting the value "0" for the width and height:

.arrow {
  width: 0; height: 0;
  border-top: 100px solid red;
  border-right: 100px solid green;
  border-bottom: 100px solid blue;
  border-left: 100px solid yellow;
}

Or the same thing:

.arrow {
  width: 0; height: 0;
  border: 100px solid;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
}

Or this:

.arrow {
  width: 0; height: 0;
  border: 100px solid;
  border-color: red green blue yellow;
}

And now, leaving only the blue triangle:

.arrow {
  width: 0; height: 0;
  border: 100px solid;
  border-bottom-color: blue;
}

Creating a Speech Bubble
Our basic layout:

<div class="speech-bubble">Hi there!</div>

And the styles:

.speech-bubble {
    position: relative;
    background-color: #292929;
    width: 200px;
    height: 150px;
    line-height: 150px; /* vertically center */
    color: white;
    text-align: center;
}

Now you need to place the arrow-triangle in the right place. Here's our color box:

.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: red green blue yellow;
}

We leave only a quarter of the square:

.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid;
  border-top-color: red;
}

Now move below and fill:

.speech-bubble {
   /* … other styles */
   border-radius: 10px;
}
.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid;
  border-top-color: #292929;
  top: 100%;
  left: 50%;
  margin-left: -15px; /* adjust for border width */
}

Examples of use:

/*
   Speech Bubbles
   Usage: Apply a class of .speech-bubble and .speech-bubble-DIRECTION
   <div class="speech-bubble speech-bubble-top">Hi there</div>
*/

.speech-bubble {
  position: relative;
  background-color: #292929;
  width: 200px;
  height: 150px;
  line-height: 150px; /* vertically center */
  color: white;
  text-align: center;
  border-radius: 10px;
  font-family: sans-serif;
}

.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid;
}

/* Position the Arrow */

.speech-bubble-top:after {
  border-bottom-color: #292929;

  left: 50%;
  bottom: 100%;
  margin-left: -15px;
}
.speech-bubble-right:after {
  border-left-color: #292929;

  left: 100%;
  top: 50%;
  margin-top: -15px;
}

.speech-bubble-bottom:after {
  border-top-color: #292929;

  top: 100%;
  left: 50%;
  margin-left: -15px;
}

.speech-bubble-left:after {
  border-right-color: #292929;
  top: 50%;
  right: 100%;
  margin-top: -15px;
}

Vertical alignment of text

minus the use of line-height in the vertical centering of text in limiting a single line. To solve this problem, you can use display: table for our Speech Bubble and display: table-cell to the text:

.speech-bubble {
 /* other styles */
  display: table;
}
.speech-bubble p {
  display: table-cell;
  vertical-align: middle;
}

Another example of non-standard use of borders:

.biohazard {
  width: 0; height: 0;
  border: 60px solid;
  border-radius: 50%;
  border-top-color: black;
  border-bottom-color: black;
  border-left-color: yellow;
  border-right-color: yellow;
}

Total
Use of the border are not limited to the «1px solid black», with borders, you can create different shapes, with enough time to write a CSS-class and apply it to the set of elements on the page.