jQuery Mobile: Header and content with rounded corners

This entry is part 44 of 73 in the series jQuery Mobile

We can have rounded corners for both the content and the heading.

This is done by using ui-corner-all in both the heading and the content declaration.

<!DOCTYPE html>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
<div data-role='page'>
    <div data-role='header'><h1>Grouping Content</h1></div>
    <h3 class='ui-bar ui-bar-a ui-corner-all'>Heading</h3>
    <div class='ui-body ui-body-a ui-corner-all'>
        <p>Lorem ipsum dolor sit amet...</p>

    <div data-role='footer' data-position='fixed'>
Try The Code
Series Navigation<< jQuery Mobile: Header and content
jQuery Mobile: Combining heading and content with rounded corners >>

Leave a comment

Leave a Reply