CSS - Borders




 CSS Borders

Learn css - css tutorial - CSS Borders - css examples - css programs

Border CSS - Definition and Usage

  • In css borders allows you to identify the style, width, and color of an element's border.
  • The borderproperty is used to apply the individual border values in a single place in the style sheet.
  • Border can be used to set the values for one or more of: border-width, border-style, border-color.
Css border
  • Border is a box around the element or a container.
  • In CSS, border properties allows us to define the style, width, and color for an element's border.

Types of Border Property :

  • There are three different types of properties in CSS border they are :
    • Border-width.
    • Border-style.
    • Border-color.

Border Width :

  • The border-width property defines the width of the four borders around an element.
  • The width can be set in a specific size (px, pt, cm, em, etc).
  • In CSS, We can also use one of the three pre-defined values : thin, medium, or thick.

Sample coding - css in html

Tryit<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
        <p style="border-width:thin; border-style:solid;">
                Welcome To WikiTechy.com
        </p>
        <br />
        <p style="border-width:thick; border-style:solid;">
                Where You Can Learn All The Technologies.
        </p>
        <br />  
        <p style="border-width:5px; border-style:solid;">
                Best E-Leaning Website In The World.
        </p>
    </body>
</html>
click below button to copy the code. By - css tutorial - team

Code Explanation - html css style

css border color
  1. In CSS, applying the border width : thin property for <p> tag states that the width is thin and style of the border is solid.
  2. Note : Using Inline CSS we are applying a specific styles to a particular element.

  3. Similarly, applying border width : thick for an element displays thicker and stronger around it than the first border.
  4. Note : We can also specify different styles like dotted, dashed to our border. Which we will learn in the upcoming chapter.

  5. Border width for an element can be specified size (in px, pt, cm, em, etc).Here, we have given 3 pixels (3 px) for the paragraph element (<p>).

Code Output - online css course

    css border image
  1. Here, the paragraph text “Welcome To wikitechy.com” has the thin border around it which is displayed in the browser window.
  2. The Paragraph “You Can Learn All the Technologies” has the thick border width since we specified border-width: thick in CSS.
  3. Similarly, border around the text “Best E-Leaning Website in the World.” is specified in pixels a shown.

This page provides a detailed information on learn to code html and css , best css sites , html and css course , css designer online , css programing , html css for beginners , web design css , learn html css , html css editor free , css training , html css website , css designer , css test online , learn html css javascript , css web , best html css editor , css advanced tutorial , css and html tutorial , learn css and html , advanced css tutorial.


View More Quick Examples

CSS BASICS & SELECTORS CSS SELECTOR ATTRIBUTE CSS STYLE FORMS COLORS & BACKGROUND CSS MARGIN & PADDING CSS WIDTH & HEIGHT CSS LINKS CSS BLOCKS

Related Searches to CSS - Borders