This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.


The shape CSS media feature can be used to test the shape of the device to distinguish recrangular and round displays.


The shape descrete feature is specified as one of two acceptable strings, either rect reprsenting a rectangular screen or round representing a circular, oval or elliptical screen.

The shape is an axis aligned rectangle or square, or a similar shape such as rounded rectangle for which the traditional designs are appropriate.
The shape is rounded or a similar shape to the circle such as an oval, an ellipse for which distinctively rounded designs are appropriate.


Note: No browsers currently support this feature.

Basic example


<h1>Hello World!</h1>


h1 {
  text-align: left;

@media (shape: rect) {
  h1 {
    text-align: left;

@media (shape: round) {
  h1 {
    text-align: center;

Custom stylesheet

This HTML will apply a special stylesheet for devices that have round screens.

    <link rel="stylesheet" href="default.css" />
    <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" />
    <link media="screen and (shape: round)" rel="stylesheet" href="round.css" />


Specification Status Comment
CSS Round Display Level 1 Draft. Initial definition.

Browser compatibility

No compatibility data found. Please contribute data for "" (depth: 1) to the MDN compatibility data repository.