This recipe shows you how to use different corner styles that are readily available with jQuery Mobile.
Copy the full code of this recipe from the code/10/corner-styles
source folder. You can launch this code using the URL: http://localhost:8080/10/corner-styles/main.html
.
Create
main.html
, and add the following<style>
tag to its<head>
section:<style> .mydiv { border: 2px solid #000; margin: 5px; text-align: center; } </style>
Create the
#main
page with fourdiv
elements in a layout grid, as follows:<div id='main' data-role='page' data-theme='a'> <div data-role='header' data-theme='e' class='ui- corner-top' style='margin-top: 10px'> <h1>Header Text</h1> </div> <div id='content' data-theme='e' data-role='content'> <fieldset data-role='controlgroup' data- type='horizontal' class='ui-grid-a'> <div class='ui-block-a ui-corner-tl mydiv' style...