CSS/HTML 自定义框架/效果

Question

I'm trying to figure out how to create custom enclosure of a div widget.

Below is the code that I have came up and I would like to add a custom frame/effect to it. Can it be done with HTML/CSS? Thanks for the help.

{<div class="container-fluid">
<section class="p-t-3 p-b-2" id="categories">
    <div class="categories">
        <div id="froala-editor">
            <div>
                <div class="row">
                    <div class="col-xs-12 text-center">
                        <div>
                            <h3 style="display: inline-block;">
                                <br>
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="row center-block">
                        <div class="col-xs-12 col-sm-6 col-md-3">
                            <div class="category" style='background-image: url("");'>
                                <a class="category-link" href="" rel="noopener noreferrer" target="_blank">
                                    <span class="category-content">
                                        <span class="category-title">Downtown</span>
                                        <span class="category-subtitle">
                                            <span class="btn btn-primary">View Listings</span>
                                        </span>
                                    </span>
                                </a>
                            </div>
                        </div>}

Answer 1

You can make custom borders by using border-image property:

Example: To apply border on .container-fluid

.container-fluid {
  border: 10px solid;
  border-image: url(https://source.unsplash.com/aDIDvOG021w/) 30 round;
}

You can replace the image with the image of your choice.

Codepen: https://codepen.io/manaskhandelwal1/pen/RwGYQgR

Answer 2

To apply border on.container-fluid

.container-fluid {
  border: 10px solid;
  border-image: url() 30 round;
}

You can add an image with the image of your choice inside the url(). That'll help you to get more customized color or you can add solid color as:

.container-fluid {
  border: 10px solid;
  border-image: url() 30 round;
  border-color: coral;
}