Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Different border properties using CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 217
    Comment on it

    We have used the different properties of the border like width, color etc.

    All the border properties are used in one time and in order: border-width, border-style and border-color.

     

    Syntax of border:-

    border: border-width border-style border-color|initial|inherit;

     

    The border-style properties include dotted, solid, double and dashed.

    Here is the explanation of some new properties of border.

    1. If we want to set the image in the border:-

    We can set the image in the border.

    Here is the CSS for border-image:-

     #border1 {
      border: 15px solid transparent;
      padding: 10px;
      border-image-source: url("http://www.w3resource.com/includes/img/border1.png");
      border-image-repeat: round;
      border-image-slice: 30;
      border-image-width: 20px;
    }

     

    2. If we want different different color in each edge:-

    Here is the CSS for that:-

    #border2 { 
      border-style: solid;
        border-color: #ff0000 #0000ff #ff0080 #00ffff;
        padding: 20px 10px;
      }

     

    3. If we want the rounded corners:-

    CSS for rounded corners is:-

    #border3 {
        border: 3px solid #FF0000;
        padding: 10px 20px; 
        background: #00CCCC;
        border-top-right-radius: 3em;
    }

     

    We can check the below link for example of three properties of border-

    https://jsfiddle.net/kaqer8da/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: