Explore Our Templates 🚀
Border
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
Border color
Change the border color using utilities built on our theme colors.
<div class="w-75p h-75p bg-gray-light-4 border border-primary"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-success"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-info"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-warning"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-danger"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-light"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-dark"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-white"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-teal"></div>
<div class="w-75p h-75p bg-gray-light-4 border border-gold"></div>import React from 'react'
function BorderColors() {
return (
<React.Fragment>
<div className="w-75p h-75p bg-grey-light-4 border border-primary" />
<div className="w-75p h-75p bg-grey-light-4 border border-success" />
<div className="w-75p h-75p bg-grey-light-4 border border-info" />
<div className="w-75p h-75p bg-grey-light-4 border border-warning" />
<div className="w-75p h-75p bg-grey-light-4 border border-danger" />
<div className="w-75p h-75p bg-grey-light-4 border border-light" />
<div className="w-75p h-75p bg-grey-light-4 border border-dark" />
<div className="w-75p h-75p bg-grey-light-4 border border-white" />
<div className="w-75p h-75p bg-grey-light-4 border border-teal" />
<div className="w-75p h-75p bg-grey-light-4 border border-gold" />
</React.Fragment>
);
}
export default BorderColors;import React from 'react'
function BorderColors() {
return (
<React.Fragment>
<div className="w-75p h-75p bg-grey-light-4 border border-primary" />
<div className="w-75p h-75p bg-grey-light-4 border border-success" />
<div className="w-75p h-75p bg-grey-light-4 border border-info" />
<div className="w-75p h-75p bg-grey-light-4 border border-warning" />
<div className="w-75p h-75p bg-grey-light-4 border border-danger" />
<div className="w-75p h-75p bg-grey-light-4 border border-light" />
<div className="w-75p h-75p bg-grey-light-4 border border-dark" />
<div className="w-75p h-75p bg-grey-light-4 border border-white" />
<div className="w-75p h-75p bg-grey-light-4 border border-teal" />
<div className="w-75p h-75p bg-grey-light-4 border border-gold" />
</React.Fragment>
);
}
export default BorderColors;<template>
<div class="w-75p h-75p bg-grey-light-4 border border-primary"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-success"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-info"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-warning"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-danger"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-light"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-dark"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-white"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-teal"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-gold"></div>
</template><template>
<div class="w-75p h-75p bg-grey-light-4 border border-primary"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-success"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-info"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-warning"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-danger"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-light"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-dark"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-white"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-teal"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-gold"></div>
</template><div>
<div class="w-75p h-75p bg-grey-light-4 border border-primary"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-success"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-info"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-warning"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-danger"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-light"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-dark"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-white"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-teal"></div>
<div class="w-75p h-75p bg-grey-light-4 border border-gold"></div>
</div>Border Radius
Change the border color using utilities built on our theme colors.
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>Border Size
Change the thickness of a border on the fly using below border size utilities.
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template><div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>