CSS 3 Tutorial Banner Image

CSS Border Property- CSS Tutorial for Beginners

Views: 453

In previous tutorials we learned about CSS margin and padding properties, the CSS border property is also an important aspect for block alignment and designing, the border property allows us to create border for our elements and apply color and styles to borders. In this tutorial we will explore the CSS border property in brief. So let us start.

Previous tutorial

CSS Padding Property- CSS Tutorial for Beginners

What is border?

A border in CSS is a boundary line outside the element’s sides.

CSS Border Property- CSS Tutorial for Beginners

css margin padding height width and border

CSS Border Property

The CSS border properties have various options for applying various styles to element’s border.

CSS Border Style Property

The border-style property is used to apply CSS border styles, the solid is applied by default. Other available border properties are:

  1. Solid: If this style is selected then the border will be a solid line.
  2. Double: If this style is selected then a double lined border will be applied.
  3. Dotted: if this style is selected then a dotted border will be applied.
  4. Dashed: If this style is selected then a dashed border will be applied.
  5. Groove: If this style is selected then a groove border will be applied.
  6. Ridge: If this style is selected then a ridge border will be applied.
  7. Inset: If this style is selected then an inset border will be applied.
  8. Outset: If this style is selected then an outset border will be applied.
  9. Mixed: If this style is selected a mixed border will be applied, the border style values are used in clockwise order, i.e. border-style: <top> <right> <bottom> <left>;
  10. None: if this style is selected then no border is applied.

Border Style for Specific Sides

If you need to apply different border styles for different sides then it is possible to apply them with mixed values as mentioned above or can be applied to each sides specifically with the following border rules.

  • Border-top-style: The “border-top-style:value “ property can be used to apply top border style.
  • Border-right-style: The “border-right-style:value” property can be used to apply right border style.
  • Border-bottom-style: The “border-bottom-style:value” property can be used to apply bottom border style.
  • Border-left-style: The “border-left-style:value” property can be used to apply left border style.

 

CSS Border Color Property

The CSS border-color property is used to define border colors for our elements, the border color can be applied using various color formats

  • Name: The name of color to be applied. i.e. red, green, black, transparent.
  • RGB: The RGB code of color to be applied. i.e. border-color: rgb(RRR, GGG, BBB);
  • RGBA: The RGBA color code allows to apply color with a opacity option, RGBA stands for RED, GREE, BLUE and Alpha. i.e. background-color: rgba(RRR, GGG, BBB, Opacity), the opacity ranges from 0 to 1.
  • HEX: The hex code allows to apply border color with hexadecimal code. i.e. border-color: #FFF; where FFF is the hex code.

Border Color Shorthand Property

The border color can be applied separately using shortcode property, the shortcode property should be applied in a clockwise direction i.e. border-color: <top> <right> <bottom> <left>;

Border Color for Specific Sides

It is also possible to apply border colors on specific sides using the following CSS border color rules

  • Border-top-color: The “border-top-color:value” property is used to apply color on the top border of any element.
  • Border-right-color: The “border-right-color:value” property is used to apply color on the right border of any element.
  • Border-bottom-color: The “border-bottom-color:value” property is used to apply color on the bottom border of any element.
  • Border-left-color: The “border-left-color:value” property is used to apply color on the left border of any

CSS Border Width Property

The border-width property is used to define width of border style used. The width property can be defined as “border-width:value” and accepts the following values.

  • Thin: If selected, a border with 1 pixel width is applied.
  • Medium: If selected, a border with 4 pixels of width is applied.
  • Thick: If selected, a border with 6 pixels of width is applied.
  • Length: This option allows us to apply a border with width in our well known values like px, em, pt, cm, etc.
  • Inherit: If selected the border width value from parent element is carried and applied.

Note: Percent value is not accepted for border width.

CSS Border Width for Specific Sides

The border width can be applied to specific sides using the following CSS properties.

  • Border-top-width: The “border-top-width:value” property is used to apply top border width of element.
  • Border-right-width: The “border-right-width:value” property is used to apply right border width of element.
  • Border-bottom-width: The “border-bottom-width:value” property is used to apply bottom border width of element.
  • Border-left-width: The “border-left-width:value” property is used to apply left border width of element.

CSS Border Width Shorthand Property

The border-width shorthand property can be used to apply borders to each sides with different widths, the shorthand property should be used in a clockwise manner, i.e. border-width:<top> <right> <bottom> <left>

 

CSS Border Shorthand Property

The border shorthand property can be used to set all the border properties in a single line. The border shorthand property can be used as border:<width> <color> <style>; i.e border: 2px #BBB solid;

What is border radius?

A border radius is roundness of corners for the elements.

Creating Round Edges with CSS Border Radius Property

A round edge adds glory to our page elements, the CSS “border-radius:value” allows us to add roundness to edges of our element. The border-radius can accept following values

  • Length: The length value defines roundness of edges in pixel, point, inches, centimeter, percent, etc.
  • Inherit: This carries the values from its parent element.
  • Initial: Sets the radius value to default or 0.

The border radius can be defined for specific corners using the following CSS rules

  • Border-top-right-radius: Defines the border radius for top right corner of element i.e. border-top-right-radius:value;
  • Border-bottom-right-radius: Defines the border radius for bottom right corner of element i.e. border-bottom-right-radius:value;
  • Border-bottom-left-radius: Defines the border radius for bottom left corner of element i.e. border-bottom-left-radius:value;
  • Border-top-left-radius: Defines the border radius for top left corner of element i.e. border-top-left-radius:value;

Border Radius Shorthand Property

The CSS border-radius can also be used with CSS shorthand property, the values can be defined in following manner to achieve the results.

  • Single Value: If a single value is defined then the value will be applied to all four sides equally.
  • Two values: If two values are defined then the first value will be used for top-left and bottom-right corners and second value will be used for top-right and bottom-left corners.
  • Three Values: If three values are defined then the first value will be used for top-left corner, second value will be used for top-right and bottom-left corners and the third value will be used for bottom-right corner.
  • Four Values: if all four values are defined then the first value will be used for top-left corner and the second value will be used for top-right corner the third value will be used for bottom-right corner and the fourth value will be used for bottom-left corner.

In next tutorial we will learn about CSS color properties and applying color to different HTML elements, if you have any suggestion or questions please let me know in comments below, if you found this tutorial helpful then do share with your friends. Good day

Comments: 0

Your email address will not be published. Required fields are marked with *