Add Labeled And Styled Borders To DOM Elements - jQuery Marking

Marking is an ultra-light jQuery plugin that adds labeled and styled borders to DOM elements. This can be useful if you want to annotate images or block elements on the webpage.

How to use it:

1. Insert the jQuery Marking plugin together with the latest jQuery library into the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.marking.js"></script>

2. Add a default border to the element.

$(function(){
  $('.element').marking();
});

3. Add a labeled border to the element.

$('.element').marking({
  label: 'Custom Label',
});

4. Apply custom CSS styles to the border.

$('.element').marking({
  label: 'Custom Label',
  markStyle: {
    borderWidth: '5px',
    borderStyle: 'dotted',
    borderColor: '#ff0000',
  },
  labelStyle: {
    color: '#ffffff',
    backgroundColor: '#4F46E5',
    fontSize: '24px',
    padding: '4px',
  }
});

---

This awesome jQuery plugin is developed by akiyoshi83. For more Advanced Usages, please check the demo page or visit the official website.