Customize the selection border

13 Feb 20261 minute to read

The PDF Viewer library allows you to customize the annotations selection borders using the annotationSelectorSettings Property.

Recommended steps

  1. Create a basic PDF Viewer sample by following the getting-started guide.
  2. Apply annotationSelectorSettings in the component to customize selector appearance (examples below show usage with freeTextSettings, rectangleSettings, and stampSettings).
<ejs-pdfviewer id="pdfViewer"
               [documentPath]='document'
               [freeTextSettings]="annotationsettings"
               [rectangleSettings]="annotationsettings"
               [stampSettings]="annotationsettings"
               style="height:640px;display:block">
</ejs-pdfviewer>
<ejs-pdfviewer id="pdfViewer"
               [serviceUrl]='service'
               [documentPath]='document'
               [freeTextSettings]="annotationsettings"
               [rectangleSettings]="annotationsettings"
               [stampSettings]="annotationsettings"
               style="height:640px;display:block">
</ejs-pdfviewer>
public annotationsettings: any = {
  annotationSelectorSettings: {
    selectionBorderColor: 'yellow',
    resizerShape: 'Circle',
    selectorLineDashArray: 9
  }
};

Find the Sample how to customize the selection border