title: Add border property to a span element
body: <p>I have a <code>span</code> element (a star rating created by a <a href="https://angular-ui.github.io/bootstrap/#/rating" rel="nofollow noreferrer">Angular-UI Rating</a> (link to Plunkr at the bottom). I want to apply a border to the entire span (rating) element so that I can alert the user when there is a form submit without rating. (similar to <code>has-error</code> class for form validation). I'm planning to do this by applying a red border to the span element.</p>
  
  <p>How can I accomplish this?</p>
  
  <p>Plunker: <a href="https://plnkr.co/edit/m0H2DZwwwtS2deMB75ON?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/m0H2DZwwwtS2deMB75ON?p=preview</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
  angular.module('ui.bootstrap.demo').controller('RatingDemoCtrl', function ($scope) {
    $scope.rate = 7;
    $scope.max = 10;
    $scope.isReadonly = false;
  
    $scope.hoveringOver = function(value) {
      $scope.overStar = value;
      $scope.percent = 100 * (value / $scope.max);
    };
  
    $scope.ratingStates = [
      {stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'},
      {stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'},
      {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'},
      {stateOn: 'glyphicon-heart'},
      {stateOff: 'glyphicon-off'}
    ];
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"&gt;&lt;/script&gt;
  &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"&gt;&lt;/script&gt;
  &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"&gt;
  
  &lt;div ng-app="ui.bootstrap.demo"&gt;
    &lt;div ng-controller="RatingDemoCtrl"&gt;
      &lt;h4&gt;Default&lt;/h4&gt;
      &lt;span uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>