{"id":2373,"date":"2017-03-25T08:43:40","date_gmt":"2017-03-25T08:43:40","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=2373"},"modified":"2017-03-25T08:44:22","modified_gmt":"2017-03-25T08:44:22","slug":"how-to-add-image-in-border-using-css","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/how-to-add-image-in-border-using-css\/","title":{"rendered":"How To Add Image in Border Using CSS"},"content":{"rendered":"
\n

CSS3 Border Images<\/h2>\n

With the CSS3 border-image<\/code> property, you can set an image to be used as the border around an element.<\/p>\n<\/div>\n

CSS3 border-image Property<\/h2>\n

The CSS3 border-image<\/code> property allows you to specify an image to be used instead of the normal border around an element.<\/p>\n

The property has three parts:<\/p>\n

    \n
  1. The image\u00a0to use in Border Using CSS<\/li>\n
  2. Where to slice the image<\/li>\n
  3. Define whether the middle sections should be repeated or stretched<\/li>\n<\/ol>\n

    We will use the following image (called “border.png”):<\/p>\n

    \"Border\"<\/p>\n

    The border-image<\/code> property takes the image and slices it into nine sections, like a tic-tac-toe board. It then places the corners at the corners, and the middle sections are repeated or stretched as you specify<\/p>\n

    Note:<\/strong> For border-image<\/code> to work, the element also needs the border<\/code> property set To Add Image in Border Using CSS.<\/p>\n

     <\/p>\n

    Example To Add Image in Border Using CSS:<\/p>\n

    #img_border {
    \nborder: 10px solid transparent;
    \npadding: 15px;
    \n-webkit-border-image: url(img.png) 30 round; \/* Safari 3.1-5 *\/
    \n-o-border-image: url(img.png) 30 round; \/* Opera 11-12.1 *\/
    \nborder-image: url(img.png) 30 round;
    \n}<\/p>\n","protected":false},"excerpt":{"rendered":"CSS3 Border Images With the CSS3 border-image property, you can set an image to be used as the border around an element. CSS3 border-image Property The CSS3 border-image property allows you to specify an image to be used instead of the normal border around an element. The property has three parts: The image\u00a0to use in Border Using CSS Where to slice the image Define whether the middle sections should be repeated or stretched We will use the following image (called “border.png”): The border-image property takes the image and slices it into nine sections, like a tic-tac-toe board. It then places the corners at the corners, and the middle sections are repeated or stretched as you specify Note: For border-image to ","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37,44],"tags":[53],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/2373"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=2373"}],"version-history":[{"count":3,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/2373\/revisions"}],"predecessor-version":[{"id":2377,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/2373\/revisions\/2377"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=2373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=2373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=2373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}