Learn CSS Borders




With CSS3 we use the border properties to define an element borders style, width, and color.


Each element has 4 borders, right, left, top, bottom, with CSS3 we use the border-style and border-width and border-color and border-radius to define diffrenet values for the element borders, we can also target one specific border using the border-top or other specific properties.



Dotted border


Solid border


Rounded border


border with backgrund color



Code Example:

            <style>
    p.dotted 
    {
       border-style: dotted;
color:green;
}

p.solid 
{
  border-style: solid; 1px;
color:red;
}

p.radius
 { 
    border: 1px solid blue;
border-radius:20px;
}

p.background 
{
    border: 1px;
background-color:yellow;
}
</style>
 
  
Try yourself >>



CSS borders properties can use one or more of the next values:


  • solid solid CSS border, continuous line.
  • thin 1px
  • medium 3px
  • thick 5px
  • dashed CSS border that consists of dashes
  • dotted CSS border that consists of dots
  • double Two lines are drawn around the element
  • groove Adds a bevel based on the color value in a way that makes the element appear pressed into the document.
  • ridge Unlike groove this CSS border property, reverses the color values in a way that makes the element appear raised.
  • none It is default, no line is drawn
  • hidden Not visible, good for adding a little extra width to an element, without displaying the border
  • outset Defines a 3D outset border
  • inset Defines a 3D inset border






Learn about CSS Border Color


CSS border-color sets the color of an HTML element borders


The CSS border-color is the shorthand for border-top-color and, border-right-color and, border-bottom-color , and border-left-color .


You can control each side of the borders using the above CSS properties, or simply use the border-color to control all borders of an HTML element together.


Make sure border-width is not set to 0, and that border-style is not set to hidden or none so you can see the border.



Border-color property is used


Multi border properties are used


Code Example:


            <style>
      p.border1 
      {
  border-style: solid;
  border-color: green;
} 

p.border2
 {
  border-style: solid;
  border-top-color:blue;
  border-bottom-color:yellow;
  border-right-color:red;
  border-left-color:green;
} 
</style>
 
  
Try yourself >>






Learn about CSS Border Width


CSS border-width sets the width of the HTML element borders


We define the CSS border-width property with pixels (px) centimeters (cm) relative units such as (em) and more.



CSS 4px width solid border


CSS 2px width dotted border


CSS 12px Double border


CSS Multi width border


Code Example:


            <style>
    p.border-solid
     {
  border-style: solid;
  border-width: 4px;
}

p.border-dotted 
{
  border-style: dotted;
  border-width: 2px;
}

p.border-double 
{
  border-style: double;
  border-width: 12px;
}

p.multi-width 
{
  border-style: solid;
  border-width: 3px 12px 5px 18px;
}
</style>
 
  
Try yourself >>






Learn about CSS Border shorthand Property


Modern CSS allow us to be efficient, and set multiple CSS border values, even diffrenet values in one property:


3 pixels width, dotted, green colored, border set with 1 propery!


Code Example:


            <style>
    h1
     {
  border: 3px dotted green;
}
</style>
 
  
Try yourself >>







learn CSS borders in 1 day, you are in the right place to learn css step by step, FreeCodeWiki is one of the best websites that provide free css animation tutorial for beginners



Navigation