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
    • 362
    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("");
      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-

 0 Comment(s)

Sign In

Sign up using

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: