Rounded corners

Configuring rounded corners

You use four individual properties, namely mcs-border-top-left-radius, mcs-border-top-right-radius, mcs-border-bottom-right-radius and mcs-border-bottom-left-radius to configure each edge. The properties take two values. The first value defines the horizontal radius of the selected edge, while the second specifies its vertical radius. When the second value is not specified, then it is assumed to be equal to the first one and the edge is thus a quarter circle. If either value is zero, then the corner is squared. Negative values are not allowed. The default value is '0 0'. The mcs-border-radius shorthand property accepts a single value which controls all four corners of an element.

Features

Support for rounded corners is represented by the following feature:

cf2:styles.BorderRadius

Example

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs">
  <head>
    <title>Rounded corners</title>
    <style type="text/css">
      p {
        mcs-border-top-left-radius: 20px 10px;
        mcs-border-top-right-radius: 20px 10px;
        mcs-border-bottom-right-radius: 20px 10px;
        mcs-border-bottom-left-radius: 20px 10px;
        border-color: red;
        border-style: solid;
        border-width: medium;
        padding: 10px;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mi arcu, rutrum non
      volutpat id, auctor in lacus. </p>
  </body>
</html>

Rounded corners

Configuring rounded corners

Features

Example

Related topics